Prevent floated divs from wrapping to next line
Question by user433143
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 by jfs
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:
Answer by Starx
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; }
