How to prevent the floating layout wrapping when firefox zoom is reduced

Question

Given the following HTML. It display two columns: #left, #right. Both are fixed width and have 1px borders. Width and borders equal the size of upp

Answer 1

Dmitri,

When the browser caluclates the new width of your divs after you zoom, it doesn't have reduce the two 478px+4px of border elements in proportion to the single 960px. So you end up with this:

Your original styles:

#wrap equals 960px wide
#left & #right, plus border equals 960px wide

Everything fits nicely.

Zoom reduced (ctrl-)

#wrap equals (approx.) 872px wide.
#left, #right, plus border eqauls 876px wide.
(left and right reduce to approx 436px each, plus 4 px of border)

Contents are too wide for #wrap. To see & measure this just apply a background color to #wrap.

To fix, remove width from #wrap. Because it is floated, it will shink to fit the contents. However, you should apply a width to floated elements and your div {float:left} applies it to #wrap.

Remove the style div {float:left} and add float:left to #left, #right.

#left, #right {float:left;width:478px;border:1px solid}

If you want #wrap to be centered, then you'll need to declare a width for it again and add margin:0 auto;, in which case you'll have this problem again [edit: or you can, as chris indicated, set the width to 100%]. So simply recalculate the width of #left, #right so that they will fit.

It's my understanding that leaving a little breathing room between the width of parent and child elements is good to avoid this sort of problem anyway.