防止浮动的div包装到下一行

Question

Here is my site, first of all.

You'll notice that underneath the divider bar in the middle of the page, there are three columns, one with a form, one with text, one with links.

Now, resize the window to slightly smaller, and the right div will drop down to the next line.

Is there anyway to just not display that? So, the divs will adjust (I have a liquid layout) up to the point where they won't fit, then, instead of wrapping the div down to the next line, it just won't be displayed?

Answer 1

You can also achieve that with CSS only.

Just assign the following CSS attributes to #row4:

#row4 {
    min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */
    overflow:hidden;
}

This differs slightly from your intended solution, since the right box will stay partly visible when sizing down the window and will not immediately disappear completely.

Please be aware that min-width won't work in IE6. However, there are several ways to emulate the min-width property, if you need to support old IEs:

http://www.thecssninja.com/xhtml/ie6-min-width-solutions

Answer 2

You can give them a wrapper div with a min-width set and force it to use a horizontal scrollbar if it gets too small. The nice thing about a wrapper div is you can give it a max-width as well and keep things from getting wonky on super huge monitors.

I'm not a fan of horizontal scrollbars, but it beats completely removing content.

Answer 3

Ok here is what you should do

Wrap all three floated division on a parent div, something like this

<div id="parent">
    <div class="form">......</div>
    <div class="text">......</div>
    <div class="links">.....</div>
</div>

Now to solve your problem give a fixed height to the parent div like

#parent { height:400px;clear:both; }

Answer 4

您必须使用Javascript来获取视口的宽度，然后将包装的div的显示属性更改为display：none，以便在浏览器宽度太小时不显示它。