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

26,462

Solution 1

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
}

Solution 2

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.

Solution 3

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/)

Solution 4

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

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

Solution 5

I was wrestling with this bug too. I had a tab navigation with fixed widths on each tab and a right margin all totaling the width of the container div.

I actually discovered a new solution, which seems to work great. The tab navigation is of course wrapped in a ul tag. I set a width on this ul tag of about 6px greater than the container div. So for example, container div is 952px wide, then ul tag is 958px wide. Since the li tags in the navigation are floated to the left and have fixed widths, they will not go beyond 952px, however the ul element has some breathing room, which appears to be necessary to squash this bug. I've tried zooming out in Firefox and IE7/8 and the tabs stay in place.

Hope this helps someone save a few minutes/hours!

View more solutions

26,462

Dmitri Zhuchkov

Updated on January 12, 2020

Comments

Dmitri Zhuchkov over 4 years

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 upper container: #wrap.

When I zoom out Firefox 3.5.2 by pressing Ctrl+- columns get wrapped (demo).

How to prevent this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <style type="text/css">
      div           {float:left}
      #wrap         {width:960px}
      #left, #right {width:478px;border:1px solid}
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="left">
        left
      </div>
      <div id="right">
        right
      </div>
    </div>
  </body>
</html>

Brandon Wang over 14 years

Yes, but if they want to set the width to 960px for a reason (say, to use the 960.gs grid system) or if they would like to center the contents, they'll need to set a width for the container.
Sam about 11 years

This solved my problem. I used the Compass mix-in: compass-style.org/reference/compass/css3/box_sizing
Kayla almost 10 years

Can anyone explain why it happens? I had the same problem on my site, Goodwill Fire 18. Both the "News Feed" and the right sidebar are floated left and right. The right sidebar has a border, similar to the OP's. When you zoom out in Firefox, it puts the right sidebar on the bottom.
Kayla almost 10 years

Bug still exists on Firefox 29.0.1