www.webdeveloper.com
Results 1 to 2 of 2

Thread: Mysterious gap at top div element in FF

  1. #1
    Join Date
    Jul 2007
    Posts
    41

    Mysterious gap at top div element in FF

    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.
    Last edited by trivektor; 06-19-2009 at 01:07 AM.

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    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.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles