ansaurus

Question

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

Answer 1

+1 A:

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.

Brandon Wang 2009-08-13 19:44:48

I extended my question with demo. Right and left float will not help. Reducing width of the columns helps but is it only one available option?

Dmitri Zhuchkov 2009-08-13 20:07:24

I've updated my example above.

Brandon Wang 2009-08-14 02:18:18

#right {width: auto;} helps with wrapping but this do not make #right fixed width. If #right do not have enough content then it will be smaller than 478px;

Dmitri Zhuchkov 2009-08-17 10:52:26

I've updated my example above.

Brandon Wang 2009-08-19 17:14:07

Answer 2

A:

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 -.

ChrisBenyamin 2009-08-13 21:09:55

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.

Brandon Wang 2009-08-14 02:20:20

Answer 3

+1 A:

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.

aaron b11 2009-08-13 21:13:15

Answer 4

+1 A:

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
}

RegDwight 2009-08-13 21:20:29

Answer 5

A:

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/2009/06/zoom-bug-in-ie78-and-firefox-caused-by-border/

detj 2010-03-25 12:20:45

ansaurus

tags:

views:

answers:

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

related questions