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

The problem is caused by the width of your #wrap.

I've set the width to 100% and it doesn't break anymore in Firefox while zooming out with CTRL -.

Answer 2

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!

Answer 3

I'm not sure I fully understand your situation. Reducing the zoom should in effect zoom out. Are you saying that when you zoom out the columns wrap around?

You should float those divs using this code in your CSS:

#container {width: 960px}
#left {float: left}
#right {float: right}

If this does not work you can try leaving a small space between the columns by adjusting the width to compensate for some small browser discrepancies.

EDITED (ignore above):

Seeing as you have provided me with more information, I need to tell you that the browser incorporates rounding when resizing and having these exact pixel-perfect sizing isn't the smartest thing to do.

Instead, you can have one div have an absolute width and the other to have an automatic width like so:

#container {width: 960px;}
#left {width: 478px;}
#right {width: auto;}

This will have the browser take as much space for #right as can be possibly taken inside the #wrap div. Be sure to set a width for the wrap, otherwise it will take 100% of the window.

I hope this helps!

EDITED:

Right IS very close to your fixed width, because you defined the width of your container already, so it is simply the container width subtracted by the width of the left side. This is merely to ensure that there is no discrepancy when resizing the window.

I understand it will not take up the entire area of space, however, as content is added, the maximum it will go is container - left width. Are you trying to apply a background? In that case set the right side background as the container background and then the left side as the left side background (make sure it covers half of it).

I hope I've helped.