DIV question

am 31.01.2008 01:51:25 von plenty900

Hi folks,

I've got some HTML like this:

text

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.

Re: DIV question

am 31.01.2008 02:08:40 von Randy Webb

plenty900@yahoo.com said the following on 1/30/2008 7:51 PM:
> Hi folks,
>
> I've got some HTML like this:
>
>

text

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

Re: DIV question

am 31.01.2008 02:13:36 von rf

wrote in message
news:6b139bab-cd18-413e-b117-12c6cba33b15@s13g2000prd.google groups.com...
> Hi folks,
>
> I've got some HTML like this:
>
>

text

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

Re: DIV question

am 31.01.2008 02:13:53 von plenty900

On Jan 30, 7:51 pm, plenty...@yahoo.com wrote:
> Hi folks,
>
> I've got some HTML like this:
>
>

text

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

Re: DIV question

am 31.01.2008 02:22:00 von 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:
>
>

text

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

...just floated divs here ...

is not that different to:

as far as these wrappers are concerned.

And different to:

I invite you to read:

if you have time and patience.

--
dorayme

Re: DIV question

am 31.01.2008 03:01:10 von dorayme

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

>
> wrote in message
> news:6b139bab-cd18-413e-b117-12c6cba33b15@s13g2000prd.google groups.com...
> > Hi folks,
> >
> > I've got some HTML like this:
> >
> >

> >

text

> >

text

> >

text

> >

text

> >

text

> >

text

> >

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

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:

text

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

Re: DIV question

am 31.01.2008 03:05:38 von dorayme

In article
,
dorayme 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

Re: DIV question

am 31.01.2008 05:17:15 von lws4art

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

text

^^
No units specified where they are required for CSS

--
Take care,

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

Re: DIV question

am 31.01.2008 09:36:46 von Ben C

On 2008-01-31, rf wrote:
>
> wrote in message
> news:6b139bab-cd18-413e-b117-12c6cba33b15@s13g2000prd.google groups.com...
>> Hi folks,
>>
>> I've got some HTML like this:
>>
>>

text

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

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.

Re: DIV question

am 31.01.2008 10:37:32 von rf

"Ben C" wrote in message
news:slrnfq3261.fqh.spamspam@bowser.marioworld...
> On 2008-01-31, rf wrote:
>>
>> wrote in message
>> news:6b139bab-cd18-413e-b117-12c6cba33b15@s13g2000prd.google groups.com...
>>> Hi folks,
>>>
>>> I've got some HTML like this:
>>>
>>>

>>>

text

>>>

text

>>>

text

>>>

text

>>>

text

>>>

text

>>>

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

--
Richard.

Re: DIV question

am 31.01.2008 14:05:31 von Andy Dingley

On 31 Jan, 04:17, "Jonathan N. Little" wrote:

> >

text

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

Re: DIV question

am 31.01.2008 14:26:16 von a.nony.mous

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

text

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

Re: DIV question

am 31.01.2008 21:03:08 von dorayme

In article ,
"rf" wrote:

>
> "Ben C" wrote in message
> news:slrnfq3261.fqh.spamspam@bowser.marioworld...
> > On 2008-01-31, rf wrote:
> >>
> >> wrote in message
> >> news:6b139bab-cd18-413e-b117-12c6cba33b15@s13g2000prd.google groups.com...
> >>> Hi folks,
> >>>
> >>> I've got some HTML like this:
> >>>
> >>>

> >>>

text

> >>>

text

> >>>

text

> >>>

text

> >>>

text

> >>>

text

> >>>

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

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

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

And while:

brings out
some things more clearly, it would not be obvious to many people
what exactly these things are.

--
dorayme