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

In article <4h9oj.9214$421.9161@news-server.bigpond.net.au>,
"rf" <rf@invalid.com> wrote:

>
> <plenty900@yahoo.com> wrote in message
> news:6b139bab-cd18-413e-b117-12c6cba33b15@s13g2000prd.googlegroups.com...
> > 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.
>
> No it isn't. It is below the first div.
>
> What you see is the *contents* of the second div appearing to the right of
> the *contents* of the first div. These two lots of *contents* have been
> removed from the normal flow, because they are floated, and will naturally
> stack up next to each other. Turn borders on (in different colours) for the
> various divs and you will see what is hapenning.

Well, fair enough in a way. If just:

<div style="border:4px solid;">
<div style="border:4px solid red;">

He will see the borders stack ok. And this does hint at how the
divs would stack if they had any content.


But perhaps OP will be puzzled by quite how the floats appear in:


<div style="border:4px solid;">
<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 style="border:4px solid red;">
<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>

They appear, as they should, under their respective parents. The
parent, having no actual height, nevertheless have borders that
have height and they must clear these borders respectively.

The floats not only relate to each other within a family but as a
family (of 3 siblings at least) they relate to the other family
of 3 siblings - the second set not able to get to the far left,
snagging on the first triplet.

--
dorayme

[Back to original message]