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

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

Relevant Pages

  • Re: z-index query
    ... it's containing div, along with an allocation of z-index:100 to the ... Value Error: float center is not a float value: center ... added below my closing HTML tag, by the free hosting service. ...
    (alt.html)
  • Re: fixed width, 2 column CSS layout problem
    ... > I trying to get the yellow sidebar to go in the white area to the right ... > I know I can add float: left; to the content div and it sort of works, ... In this case the content div and the ... I know of several sites that use a similar layout and I've ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: Nested div display problem with IE and Firefox.
    ... "Since a float is not in the flow, ... div was created before, it's true, but it's a parent container, not ...
    (alt.html)
  • Re: I cant quite seem to grasp floats.
    ... The border one is too, it is just that it is ... having a div here would be to have some other content in it. ... Forget for the moment about the float. ... the ul is a child of the div in the html. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Dilemma with background images (putting borders on DIVs)
    ... background images to child elements within that DIV. ... tempor incididunt ut labore et dolore magna aliqua. ... quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo ... Duis aute irure dolor in reprehenderit in voluptate velit esse cillum ...
    (comp.infosystems.www.authoring.stylesheets)