DIV question

[plenty900]

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]

(e-mail address removed) 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.

 

[rf]

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:"

 

[plenty900]

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.

 

[dorayme]

<[email protected]
m>,

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]

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]

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.

 

[Jonathan N. Little]

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

 

[Ben C]

No it isn't. It is below the first div.

In a sense, although both divs have zero height, so they are in this
case also on top of each other, which is a special case of below.

As dorayme points out, the floats in each div do always go at least
below the the top inside padding edge of the block they're in.

It's only because, with no borders or padding on the blocks, the top
inside padding edges of the two divs are in exactly the same position
that the floats are all aligned vertically with each other.

 

[rf]

In a sense, although both divs have zero height, so they are in this
case also on top of each other, which is a special case of below.

As dorayme points out, the floats in each div do always go at least
below the the top inside padding edge of the block they're in.

It's only because, with no borders or padding on the blocks, the top
inside padding edges of the two divs are in exactly the same position
that the floats are all aligned vertically with each other.

Which is why switching on some borders makes everything self evident.

 

[Andy Dingley]

^^
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]

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

^^
No units specified where they are required for CSS

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

 

[dorayme]

Which is why switching on some borders makes everything self evident.

Switching on some borders can also puzzle and confuse OP without
an understanding of a few issues that surround this matter.

<http://netweaver.com.au/alt/contentlessDivs.html>

would be sure to confuse (alter browser text size up and down).

And while:

<http://netweaver.com.au/alt/contentlessDivs.html2> brings out
some things more clearly, it would not be obvious to many people
what exactly these things are.