Mysterious gap at top div element in FF
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.
Last edited by trivektor; 06-19-2009 at 02:07 AM.
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.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)