I can't quite seem to grasp floats.

[-Lost]

http://foomanchu.com/understanding_floats.htm

In this example, I don't understand why the UL drops out of the bottom
of the DIV.

I've read over the float section in the "visual formatting model" area a
few times, but I simply don't know what's going on here.

Is there perhaps a simpler float tutorial out there, or would anyone
like to dumb it down for me?

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.

[rf]

"-Lost" <ma****************@techie.comwrote in message
news:gs******************************@comcast.com. ..

http://foomanchu.com/understanding_floats.htm

In this example, I don't understand why the UL drops out of the bottom of
the DIV.

It doesn't. The ul is still firmly inside the div. That's why the div is
still about 1 em high, the top margin of the ul is stopping it from
collapsing any further.

What you have done, as far as layout is concerned, is to remove each li. The
only content left in the div is a zero height ul(1) so of course it will
collapse as per your example, limited by the margin on the ul.

(1) The ul no longer has any content (for layout purposes) and so it has
callapsed to zero height.

After all that is done, each li is put back (floated left) exactly where
they would have been if they weren't floated: a ul margin-top down from the
top of the div.

--
Richard.

[dorayme]

In article <ub*****************@news-server.bigpond.net.au>,
"rf" <[e-mail]:

"-Lost" <ma****************@techie.comwrote in message
news:gs******************************@comcast.com. ..

http://foomanchu.com/understanding_floats.htm

In this example, I don't understand why the UL drops out of the bottom of
the DIV.

It doesn't. The ul is still firmly inside the div. That's why the div is
still about 1 em high, the top margin of the ul is stopping it from
collapsing any further.

What you have done, as far as layout is concerned, is to remove each li. The
only content left in the div is a zero height ul(1) so of course it will
collapse as per your example, limited by the margin on the ul.

(1) The ul no longer has any content (for layout purposes) and so it has
callapsed to zero height.

After all that is done, each li is put back (floated left) exactly where
they would have been if they weren't floated: a ul margin-top down from the
top of the div.

At least the _first item_ is so put back. To see this, try

<li id="noFloat">Item 1</li>

and css:

li#noFloat {float:none}

OP is using the floating to horizontalize the list items, if all
of them are float deprived, they go back different.

<li id="noFloat">Item 1</li>
<li id="noFloat">Item 2</li>
<li id="noFloat">Item 3</li>
<li id="noFloat">Item 4</li>

But rf's points are good. OP might try putting a little content
in to see it; eg. a character just after the </ulor even give
the div any reasonable height (at least in FF).

(hey...rf... you see how I know _some_ big words: horizontalize)

--
dorayme

[-Lost]

rf wrote:

"-Lost" <ma****************@techie.comwrote in message
news:gs******************************@comcast.com. ..

>http://foomanchu.com/understanding_floats.htm

In this example, I don't understand why the UL drops out of the bottom of
the DIV.

It doesn't. The ul is still firmly inside the div. That's why the div is
still about 1 em high, the top margin of the ul is stopping it from
collapsing any further.

What you have done, as far as layout is concerned, is to remove each li. The
only content left in the div is a zero height ul(1) so of course it will
collapse as per your example, limited by the margin on the ul.

(1) The ul no longer has any content (for layout purposes) and so it has
callapsed to zero height.

After all that is done, each li is put back (floated left) exactly where
they would have been if they weren't floated: a ul margin-top down from the
top of the div.

OK, 2 things then. The first being, based on the assumption I am
understanding this correctly.

1. So all that is needed is to provide the UL some height

2. You understanding of this is based in whole on a reading of the CSS
specification at W3C? Or is there perhaps another site, article, or
series of articles that can explain it as you have done?

Many thanks, rf.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.

[dorayme]

In article <ym****************@news-server.bigpond.net.au>,
"rf" <[e-mail]:

dorayme gets this a bit wrong by saying that only the _first item_ is put
back at the vertical position it would have had. She considered the entire
page as a whole, before any floating was done. Floats don't work that way.
Consider it like this:

Not sure this bit is something it got wrong? It was a complicated
context. It was basically supporting most of what rf was saying.

(1) The ul no longer has any content (for layout purposes) and so it has
callapsed to zero height.

After all that is done, each li is put back (floated left) exactly where
they would have been if they weren't floated: a ul margin-top down from the
top of the div.

On the page as seen, at least the _first item_ is so put back. To
see this, it said to try

<li id="noFloat">Item 1</li>

and css:

li#noFloat {float:none}

OP is using the floating to horizontalize the list items, if all
of them are float deprived, they go back different (not to
"exactly where they would have been if they weren't floated")

<li id="noFloat">Item 1</li>
<li id="noFloat">Item 2</li>
<li id="noFloat">Item 3</li>
<li id="noFloat">Item 4</li>

It thought rf's explanations good and menschful. It was a small
detail. Anyway, it has to get back to thinking hard about yogurt.

--
dorayme

[Bergamot]

-Lost wrote:

>
Is there perhaps a simpler float tutorial out there

http://brainjar.com/css/positioning/

--
Berg

[-Lost]

Bergamot wrote:

-Lost wrote:

>Is there perhaps a simpler float tutorial out there

http://brainjar.com/css/positioning/

Many thanks.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.