Prevent floated divs from wrapping to next line

Question

Here is my site, first of all:

www.kaiserroof.com/test/index2.html

So here is my problem. 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, they 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?

I hope this makes sense. Any help would be greatly appreciated.

Answer 1

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 2

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 3

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 4

You would have to use Javascript to get the width of the viewport, then change the display property of the div that is wrapping to display:none so that it doesn't show up when the browser width is too small.