Mysterious top margin

HTML & CSS
1

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

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.

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

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

The padding or border would have to be on the parent and not the element with the top margin :slight_smile: