SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mysterious top margin

    Hi, I'm setting up a VERY basic temporary page for a site. It just uses a few background images and DIVs to lay everything out. Should be very simple.

    But I'm having a hard time understanding why my wrapper 'container' DIV is not aligning with the top of the page. I've set the 'body' and this 'container' to both have no margins or padding. It almost looks like a 'logo' DIV a couple levels down is affecting the margin on this outer DIV, but I don't know why that would be.

    Interestingly, it looks OK in IE, but not in other browsers.

    Here's the URL if anyone can take a look and help me understand what's going on.

    THANKS!

    http://www.lane-and-lane.com/sample/

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    That gap above the #container div is the top margin from your #logo div.
    You have not established clearance anywhere yet so it is setting it's margin from the body element. It will collapse the #container BG color when that happens.

    This boils down to a collapsing margins issue.

    You can establish clearance and "un-collapse the margins" with either a top border, top padding, or overflow:hidden; on the #container.

    Code:
    #container {
        width: 976px;
        height: 586px;
        background: #FCB651 url('images/socalcan-body-background.gif') no-repeat top left;
        margin: 0 auto;
        padding: 0;
        text-align: left;
        overflow:hidden;/*establish clearance & contain floats*/
    }
    #mainContent {
        padding: 0 22px;
        position: relative;
    }
    #logo {
        margin: 32px 0 0 0;
        padding: 0;
        height: 44px;
        background: #FFFFFF url('images/socalcan-logo.gif') no-repeat top left;
        text-indent: -5000em;
    }

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting. I was not aware of the collapsing margin issue on parent-child elements. Collapsing margins between adjacent elements (one above another) makes sense to me, but I'll have to read back through that page to fully understand the 'nested' concept. And maybe I wasn't aware about losing the backgrounds either.

    So I added the 'overflow:hidden' to the #container DIV. Seemed the most intuitive solution. Not sure what possible negative impacts this might have if any.

    If I were to add padding or a border, it would have to be on both elements, correct (I tried applying padding to the #logo only, but didn't help)? This just seemed like more effort.

    Thanks for the help!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The padding or border would have to be on the parent and not the element with the top margin
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

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