How to prevent the floating layout wrapping when f

2019-02-02 08:39发布

站内问答 / HTML/CSS
780 9 5

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>

9条回答
三岁会撩人
2楼-- · 2019-02-02 09:08

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

#right{
    margin-right:-400px;
}
查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
3楼-- · 2019-02-02 09:08

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

查看更多
0人赞 添加讨论(0) 举报
傲
4楼-- · 2019-02-02 09:12

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.

查看更多
0人赞 添加讨论(0) 举报
何必那么认真
5楼-- · 2019-02-02 09:13

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!

查看更多
0人赞 添加讨论(0) 举报
该账号已被封号
6楼-- · 2019-02-02 09:18

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.

查看更多
0人赞 添加讨论(0) 举报
beautiful°
7楼-- · 2019-02-02 09:19

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
}
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)