Mysterious gap at top div element in FF

[trivektor]

Hi,

I've been working on this http://tri.phongnguyen.net/mysterious_gap/. I'm not sure why there is a mysterious gap at the top of the page as shown in FF2 & 3. It seemed to be caused by margin-top:20px of #content. Removing this margin-top, or add a div with a specified width into #header-wrapper, right after #header, or use a border-top for #header-wrapper and everything works fine. I know these solutions but I still wonder why they work? Can someone please explain to me what happens? Thanks.

[aj_nsc]

The empty "clear" div does the trick. Apply overflow: hidden to an element that contains floats and it will automatically clear them so you don't need to apply a meaningless clearing div like the one in your header.

Seems like you're site has a little case of divitis, too.....keep CSS simple - believe it or not, you seldomly NEED wrapper divs, then only case I can think that you do is in certain circumstances with background images.