DIV question

[plenty900@yahoo.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.

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?

Thanks.

[Randy Webb]

plenty900@yahoo.com said the following on 1/30/2008 7:51 PM:
> 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?

I can. And I will if you explain what this has to do with Javascript.

float:left takes it out of the flow of the document. Your outer divs, in
this instance, are useless.
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[plenty900@yahoo.com]

On Jan 30, 7:51 pm, plenty...@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>

To answer my own question, the second outer DIV needs to have a
"clear: left" in its style.

[rf]

<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.

> My intention is to have the 2nd outer DIV
> appear below the first.

Give the second div style="clear: both:"

--
Richard.

[dorayme]

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

[dorayme]

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

[dorayme]

In article
<doraymeRidThis-2C68D4.13011031012008@news-vip.optusnet.com.au>,
dorayme <doraymeRidThis@optusnet.com.au> wrote:

> the second set not able to get to the far left,
> snagging on the first triplet.

the second set not able to get to the far left *of their own
parent*, snagging on the first triplet.

--
dorayme

[Jonathan N. Little]

plenty900@yahoo.com wrote:
> Hi folks,
>

Just because no one else mentioned it the style property is invalid.

> I've got some HTML like this:
>
> <DIV>
> <DIV style="float: left; width: 40"> text </DIV>
^^
No units specified where they are required for CSS

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Andy Dingley]

On 31 Jan, 04:17, "Jonathan N. Little" <lws4...@centralva.net> wrote:

> > <DIV style="float: left; width: 40"> text </DIV>
> ^^
> No units specified where they are required for CSS

IE will auto-correct for that error when in quirks mode. Then if you
ever swap doctype to a decent one, it'll stop doing that and the whole
layout breaks into pieces. Nasty. Particularly nasty when a PHB sees
this as an excuse for "Standards, strict mode and CSS doesn't work as
well as 3.2 does" 8-(

[Beauregard T. Shagnasty]

In alt.html, Jonathan N. Little wrote:

> plenty900@yahoo.com wrote:
>> Hi folks,
>
> Just because no one else mentioned it the style property is invalid.
>
>> I've got some HTML like this:
>>
>> <DIV>
>> <DIV style="float: left; width: 40"> text </DIV>
> ^^
> No units specified where they are required for CSS

Yep. I was going to post, and forgot, asking: "40 hobnobs?"

--
-bts
-Friends don't let friends drive Vista