How to prevent a float:left DIV from wrapping?

Hi folks,

Another question for you:

If I have multiple DIVs side by side using "float: left", and one
happens
to be very wide, how do I ensure that it doesn't wrap?

I have found that for some reason the width of the text inside
is taking precedence, when I want the text inside to wrap
within the DIV.

However I don't want to set the width of the DIV, because it is
a DIV that must grow and shrink when the window is resized.

Thanks!

Re: How to prevent a float:left DIV from wrapping?

On 2008-01-31, plenty900@yahoo.com wrote:
> Hi folks,
>
> Another question for you:
>
> If I have multiple DIVs side by side using "float: left", and one
> happens
> to be very wide, how do I ensure that it doesn't wrap?
>
> I have found that for some reason the width of the text inside
> is taking precedence

Yes, that's how it works. The text helps itself to as much space as it
needs up to the maximum available, where available means the full
content width of the container, _not_ the space to the right of any
other floats that are already in the way. If it no longer fits in that
gap, it drops down.

[...]
> However I don't want to set the width of the DIV, because it is
> a DIV that must grow and shrink when the window is resized.

There is a trick you can do here with block formatting contexts, which
although not guaranteed by the specification, works in today's browsers.

Try this:



....