Posted by dorayme on 01/31/08 01:22

In article
<6b139bab-cd18-413e-b117-12c6cba33b15@s13g2000prd.googlegroups.co
m>,
plenty900@yahoo.com wrote:

> Hi folks,
>
> I've got some HTML like this:
>
> <DIV>
> <DIV style="float: left; width: 40"> text </DIV>
> <DIV style="float: left; width: 40"> text </DIV>
> <DIV style="float: left; width: 40"> text </DIV>
> </DIV>
> <DIV>
> <DIV style="float: left; width: 40"> text </DIV>
> <DIV style="float: left; width: 40"> text </DIV>
> <DIV style="float: left; width: 40"> text </DIV>
> </DIV>
>
> I'm finding that the second outer DIV is appearing
> to the right of the first outer DIV.
>
> My intention is to have the 2nd outer DIV
> appear below the first. I had assumed this
> would happen because its position is static
> by default.
>
> Can someone explain why it behaves
> the way it does?


The wrapper divs have no content. They do not see their floated
children and therefore grow no height for them. if you want to
see them spring to life, try a background different for each and
put at least a full stop inside them. The full stop will be an
inline element in the regular flow triggering content and height.

Your:

<div style="background: #fcc;">...just floated divs here ...</div>
<div style="background: #cff;">...just floated divs here ...</div>

is not that different to:

<div style="background: #fcc;"></div>
<div style="background: #cff;"></div>

as far as these wrappers are concerned.

And different to:

<div style="background: #fcc;">.</div>
<div style="background: #cff;">.</div>


I invite you to read:

<http://netweaver.com.au/floatHouse/>

if you have time and patience.

--
dorayme

[Back to original message]