Can I stop side by side divs from wrapping?

I did a search for this but couldn’t find anything.

Is there a way to stop side by side divs which both contain an image and are themselves in a container div from wrapping underneath each other when the browser width is changed, i/e narrowed? The right hand div is slipping under the left hand div.

I’ve done a ton of searching for a fix, I’d appreciate a hand with this.

You can check this page, really helpfull

If you float the boxes, they will wrap if there isn’t enough room for them. It’s usually the most user-friendly thing to do, since they will then adapt to the viewport size that the user chooses.

If you need to prevent this, make sure you set a width (or min-width) that is enought to enclose all the boxes.

Hi Tommy, thanks for responding. This seems so simple but it’s driving me nuts. I’ve just been looking at the min-width bit in your book (great book!) but it’s still not fixing the problem and that’s not even taking into account that IE6 doesn’t support min-width?

The problem is the header. ( - my first Joomla site so I inherited a lot of the CSS, also my first foray in a long time into fluid width, I normally build fixed width sites, now I remember why).

I have a header div which contains leftHeader and rightHeader divs, both of which have fixed widths set - 537px & 368px and floated left and right respectively. So all I need to do is set the min-width of the header div to 905px and it won’t collapse any more than that right?

Thing is that is it is still collapsing. I’m stuck. Am I missing something obvious?

If you want the right side of your header ( with icons) stay in place when you resize the window you can position that element absolute and give margin-left:500px ( play with it to get the right number).
The header should be position:relative.
Give it a try.
Hope that will work for you.

Thanks for the suggestion, I did have a play with positioning but if it’s fixed in place by ‘left:600px;’ for example, then it doesn’t collapse with the browser and that makes the fluid design a bit pointless.

I want it to collapse but only till it meets the left hand edge of the lleftHeader div and then stop there, not slip under it.

Setting it to anything above 905px should prevent wrapping. (You might need to add 6px to that to account for IE’s 3-pixel jog bug.)
IE6 doesn’t support min-width, but you can set width:912px instead (just for IE).

For some reason min-width just isn’t working in FF.

Also, if I set the width to 912 for IE6, then my header won’t be full width of the browser at 1024x768 unless I start using more divs, shouldn’t I be able to achieve that with more minimal markup?

Check with Firebug to see what the problem might be in Firefox.

For IE6, your only remaining option might be to use an expression() to emulate min-width.


(Presuming ‘standards’ mode.)

Take JJMcClure advice about this issue. I was looking into this as well, and a simple relative position placement is the best fix. In fact I would say it is not a fix, but the way you are supposed to do it.