Div collapses when no border is set

I'm using the example in
<http://www.alistapart.com/stories/practicalcss/> to create a
navigation bar without using tables. The navigation buttons float to
the left and the logo floats to the right. To keep the containing div
from collapsing there is an empty div with style="clear: both;" at the
end. This works so long as there is a border to the containing div.
If there is no border then the background color is not set - just as
if the containing div had collapsed to nothing.

I'm using Mozilla. Is this a bug, and is there a good workaround? I
can think of a couple - use nbsp, only float one of the divs, make the
border the same colour as the background. But I'd really like to
understand why it makes a difference if a border is present or not.

--

__o Alex Farran
_`\<,_ Analyst / Programmer
(_)/ (_) www.alexfarran.com

In article <m3y8zdw1yv.fsf (AT) localhost (DOT) localdomain>, alex (AT) alexfarran (DOT) com
says...

I'm using the example in
http://www.alistapart.com/stories/practicalcss/> to create a
navigation bar without using tables. The navigation buttons float to
the left and the logo floats to the right. To keep the containing div
from collapsing there is an empty div with style="clear: both;" at the
end. This works so long as there is a border to the containing div.
If there is no border then the background color is not set - just as
if the containing div had collapsed to nothing.

URL?

Jacqui or (maybe) Pete writes:

URL?

<http://www.alexfarran.com/mozbug>

Fiddling around a bit it looks like background colour only extends as
far as the lines where there is non floated content, and not to the
bottom of the div as you'd expect. Layout is unaffected.

--

__o Alex Farran
_`\<,_ Analyst / Programmer
(_)/ (_) www.alexfarran.com

In article <m3n0fsx9mr.fsf (AT) localhost (DOT) localdomain>, alex (AT) alexfarran (DOT) com
says...
....

http://www.alexfarran.com/mozbug

Fiddling around a bit it looks like background colour only extends as
far as the lines where there is non floated content, and not to the
bottom of the div as you'd expect. Layout is unaffected.

That's very interesting. I can't think of a reason why the borders

should affect anything, and I'd certainly be interested in any other
views on the subject - unfortunately, Jukka seems to be on holiday right
now!

OTOH, I can give you a simple fix for the problem (if you have a
problem). See:

http://porjes.com/ala.html

I've just put a (non-floated) space between the two spans, which sets
the height of the div. Of course if you have bolding or font sizes on
the spans then you also have to apply them to the div (so that the space
is the same height as the spans).

Hope that's helpful.

Alex Farran wrote:

http://www.alexfarran.com/mozbug

Fiddling around a bit it looks like background colour only extends as
far as the lines where there is non floated content, and not to the
bottom of the div as you'd expect. Layout is unaffected.

If the only things in the div are floated about, and there's no border,
there's no height to the div, is there?

That's what Mozilla's DOM inspector seems to indicate.

--
Jim Davis

In article <MPG.1972dba6f9eac4b1989ab4 (AT) news (DOT) cis.dfn.de>,
lauri (AT) raittila (DOT) cjb.net says...

In article <MPG.197286f45e2e31a5989bf2 (AT) news (DOT) CIS.DFN.DE>, Jacqui or
(maybe) Pete wrote:
In article <m3n0fsx9mr.fsf (AT) localhost (DOT) localdomain>, alex (AT) alexfarran (DOT) com
says...
...
http://www.alexfarran.com/mozbug

Fiddling around a bit it looks like background colour only extends as
far as the lines where there is non floated content, and not to the
bottom of the div as you'd expect. Layout is unaffected.

....
http://porjes.com/ala.html

I've just put a (non-floated) space between the two spans, which sets
....
But you also set the height of div. (1.4em). Does it work whitout? Works
on Opera 7.2b1, but so did all others.

No, it didn't! I'd forgotten I'd put that height in.

I thought that a non-floated space would set the height of the div, but
Mozilla ignores it. However, if I add a &nbsp; at the end of the div
then Mozilla finally understands:

http://porjes.com/ala2.html

(I've also simplified the html some more).

Jim Davis writes:

Alex Farran wrote:
http://www.alexfarran.com/mozbug> Fiddling around a bit it looks
like background colour only extends as far as the lines where there
is non floated content, and not to the bottom of the div as you'd
expect. Layout is unaffected.

If the only things in the div are floated about, and there's no
border, there's no height to the div, is there?

Normally, but there is a spacer div at the bottom with "clear: both;"
set that ought to give the containing div some height. If you were to
remove it from the containing div with a border then it wouldn't have
any height either.

That's what Mozilla's DOM inspector seems to indicate.

That looks useful. I think I'll install it.

--

__o Alex Farran
_`\<,_ Analyst / Programmer
(_)/ (_) www.alexfarran.com

Lauri Raittila writes:

In article <MPG.197286f45e2e31a5989bf2 (AT) news (DOT) CIS.DFN.DE>, Jacqui or
(maybe) Pete wrote:
OTOH, I can give you a simple fix for the problem (if you have a
problem). See:

http://porjes.com/ala.html

I've just put a (non-floated) space between the two spans, which
sets the height of the div. Of course if you have bolding or font
sizes on the spans then you also have to apply them to the div (so
that the space is the same height as the spans).

But you also set the height of div. (1.4em). Does it work whitout?
Works on Opera 7.2b1, but so did all others.

I don't think it will, but an &nbsp; character in the same place will
work.

--

__o Alex Farran
_`\<,_ Analyst / Programmer
(_)/ (_) www.alexfarran.com

Jacqui or (maybe) Pete wrote:

In article <o87Oa.22626$9v4.5381 (AT) news02 (DOT) roc.ny>,
revhippie (AT) frontiernet (DOT) net says...
If the only things in the div are floated about, and there's no border,
there's no height to the div, is there?


Yeah, but he's got a 'clear:both' div in there.

According to this:

http://www.w3.org/TR/REC-CSS2/visuren.html#flow-control

It looks like the clear:both might've done something if it were /after/
the floated spans instead of before them.

I realize this isn't about margins, but I think maybe I was thinking of
this:

http://bugzilla.mozilla.org/show_bug.cgi?id=200765

That had bitten me in the keister once before, and thought may possibly
be related. Still, DOM Inspector shows both divs right outside the
floats as being 0x0.

--
Jim Davis

Alex Farran wrote:

Normally, but there is a spacer div at the bottom with "clear: both;"
set that ought to give the containing div some height. If you were to
remove it from the containing div with a border then it wouldn't have
any height either.

OH! Duh. Sorry, I only saw the one above it, didn't see the "clear:
both" below the floats. Please ignore the post where I linked to CSS specs.

That's what Mozilla's DOM inspector seems to indicate.

That looks useful. I think I'll install it.

Never having knowingly messed with (or even, understood the acronym) the
DOM before I used the inspector, it was kind of tricky... but very handy
and enlightening.

I realize a work-around may not be what you're looking for, but I
noticed that removing both the '<div class="spacer"></div>' divs and
adding a '<br style="clear: both;" />' immediately after the '<div
class="row">...</div>' seems to work.

--
Getting more confused by the day,
Jim Davis