How to Make a Fluid Layout

Question

So I was assigned in class to code this redesigned homepage in a week. It has to me responsive so after I got it all coded (which is a miracle in and of itself) I started to research how to make it responsive. I know this probably wasn't the best way of doing things, but hey, this is really my first time to code anything so live and learn I suppose. Anyway, I've gone through my CSS and set all of widths to be percentages to give it fluidity (a good place to start I think). I assigned a max-width to almost everything because I have a slider set up with 600px images and I don't want them to scale above that. So everything works fine until I get below 1300. You can visit the site here to see what happens. I do not understand why the two boxes on the right jump down if they are simply told to take up a certain percentage of the parent div. Interestingly enough, at the same point the last footer item also drops down. Is there something I am missing or what can I do to make it scale properly?

I know that in actuality I do not want it to scale indefinitely and plan to use media queries to handle it at smaller resolutions, but it is bothering me that it isn't scaling properly at even such a high resolution of 1300. I wasn't planning to do a media query until I got down to 1024.

If you have any other advice or resources for making a site responsive feel free share. Thanks in advance.

Here's my html

<div class="container">
    <div id="captioned-gallery">

    </div><!--captioned gallery-->

    <div id="menu-ad">
        <div>
            <p class="titles">Our Fare</p>
            <p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
            <a href="#" id="button">VIEW MENU</a>
        </div>
    </div><!--end menu ad-->

      <div id="hours">
        <div>
        <p class="titles">Hours</p>
            <p id="down">
                <span class="subtitles">Lunch</span>
                <span class="hours">Mon-Fri 11-4</span>
            </p>

            <p>
                <span class="subtitles">Dinner</span>
                <span class="hours">Mon-Sat 4-12</span>
            </p>

            <p>
                <span class="subtitles">Bar</span>
                <span class="hours">Mon-Sat 4-12</span>
            </p> 
        </div>
</div><div style="clear:both;"></div><!--end hours-->
</div><!--end container-->

And the CSS

/*Container*/

div.container {
    margin: 0 auto;
    position: relative;
    width: 70%;
    max-width: 910px;
    border: 2px solid #b9aea3;
}

/*slider*/

div#captioned-gallery {
    width: 65.934066%;
    max-width: 600px;
    margin: 10px;
    overflow: hidden;
    height: auto;
    float: left;




/*menu ad*/

div#menu-ad {
    position: relative;
    width: 31.648352%;
    max-width: 288px;
    height: auto;
    float: right;
    border-left: 2px solid #b9aea3;
    border-bottom: 2px solid #b9aea3;
    overflow: hidden;
}

div#menu-ad div {
    background: #f9f4df;
    margin: 10px;
    padding: 1.9rem 4rem 2.5rem 2.5rem;
    height: 200px;
    display: inline-block;
}


a#button {
    padding: .7rem 1.3rem .5rem 1.3rem;
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size: 1.8rem;
    color: #f8f8f1;
    background: #d6832e;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    position: absolute;
    float: left;
    bottom: 3.5rem;
}


/*hours*/

div#hours {
    position: relative;
    width: 31.648352%;
    max-width: 288px;
    height: auto;
    float: right;
    border-left: 2px solid #b9aea3;
}

div#hours div {
    background: #f9f4df;
    margin: 10px;
    padding: 1.9rem 2.5rem 2.5rem 2.5rem;
    width: auto;
    height: 150px;
}


#down span{
    margin-top: 1rem;
}

#hours p {clear:both;}

Answer 1

The reason why the right boxes "jump down" is that you set a 10px margin on the #captioned-gallery and a 2px border-left on #menu-ad.

---

EXPLANATION

---

On a 1400px wide screen

#container has 70% width = 1400 * 70 / 100 = 980px

#captioned-gallery has 65.9..% width = 980 * 65.9 / 100 = 645.42px
AND a 10px margin so the width of #captioned-gallery is 645.42 + 2*10 = 665.42px

#menu-ad has 31.6..% width = 980 * 31.6 / 100 = 309.68px
AND a 2px border-left so #menu-ad is 309.68+2px=311.68px

So the width of #captioned-gallery + #menu-ad = 665.42 + 311.68 = 977,36px which is less than 980px (width of #container) so it can fit.

---

On a 1000px wide screen

If you do the same calculation you end up with these results

#container is 700px wide
#captioned-gallery is 481.3 wide
#menu-ad is 223.2 wide

481.3 + 223.2 = 704,5px So #captioned-gallery + #menu-ad can't fit in the #container anymore so it "jumps down" which is the behavior for floating elements that can't fit in their container.

---

---

SOLUTION

Besides from using media-queries as stated by Sebsemillia you can change the margins to % (including them in the total with of the elements so it isn't larger than 100%) and use the box-sizing CSS property to include the left-border in the #menu-ad , #hours width :

The width and height properties include the padding and border, but not the margin

You CSS could look like this :

#captioned-gallery{
    width:65%;
    margin:10px 1%;
}
#menu-ad,#hours{
    width:33%;
    border-left:2px solid #b9aea3;
    box-sizing: border-box;
      -moz-box-sizing: border-box;     //for firefox support
}

---

33% + 65% + 2*1% = 100%

Answer 2

You should look into media-queries. I guess if you read this article it will help you a lot to understand the issue.

CSS Tricks - css media queries

For example when the viewport is under your max-width of 960px, you should set the width of your footer to 100%, instead of 70 %.