Posted by Ben C on 01/31/08 08:46

On 2008-01-31, plenty900@yahoo.com <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:

<style type="text/css">
.left
{
float: left;
width: 15em;
background-color: palegreen;
border: 2px solid blue;
}
.right
{
/*
* This div squeezes into whatever space remains to the
* right of the float and doesn't jump down. Note that the
* CSS 2.1 specification does allow it jump down if that's
* what implementors want to do though. It's just lucky so
* far none of them do.
*/
border: 2px solid blue;
overflow: hidden;
}
</style>

....
<div class="left">
Left column
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

[Back to original message]