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%