Posted by Ben C on 05/18/07 23:05

On 2007-05-18, JWL <user@example.net> wrote:
[...]
>> Use "clear: both;" for #content. That way the content will be floating
>> to the left and the #sidemenu to the right. The menu and the normal text
>> stay on their place.
>
> Thanks for answering. But even with clear: both; on #content, the
> #navbar div appears to collapse. You can see what I mean here:
>
> http://www.sarroukhs.f2s.com/index.html
>
> The #navbar div has a bright red background but the colour isn't visible
> unless I put a height on #navbar.

It's because floats don't contribute to the height of their container.
There's nothing else in #navbar except floats, so it gets zero height.

As BootNic suggested, make it overflow: hidden. Not because you want to
change the overflow behaviour, but for the sideeffect that this makes
#navbar a "block formatting context root" which means that it does
include floats in its height calculation after all.

[Back to original message]