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

Ok guys, when you have a div with fixed height, to prevent zoom from breaking up everything, add overflow:hidden to it's css. That did the trick for me and now every browser can go zoom crazy. :)

Answer 2

I encountered the same issue described above. After, hopelessly wandering around the internet for a few minutes, I found out that apparently it's a bug in Firefox 3.5.x and IE 7/8. The bug is still present as of this writing.

To see more about the bug go here: http://markasunread.com/?p=61 (formerly http://markasunread.com/2009/06/zoom-bug-in-ie78-and-firefox-caused-by-border/)

Answer 3

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.

Answer 4

Best Solution to fix floating bug in every case is use table layout using tds. That will never loose floating.

Answer 5

Try switching to a different box model as follows:

#left, #right 
{ 
  width:480px;
  border:1px solid;
  box-sizing: border-box;

  /* and for older/other browsers: */
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box
}

Answer 6

I had similar problem. Setting #right to a negative margin worked. For example:

#right{
    margin-right:-400px;
}