August 30, 2010

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:

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

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; }

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!