Don't understand, looking for help.

Forum Moderators: not2easy

Message Too Old, No Replies

Don't understand, looking for help.

chinaski

9:49 pm on Oct 28, 2004 (gmt 0)

What I don't understand about the following code is why the body background color is showing inbetween the divs that mark the header, content, and footer.

I want no separation between the divs.

Can someone explain what's going on?

Help very much appreciated.

<html>
<head>
<style>
body {
background-color: black;
}
#header {
background-color: red;
margin: 0;
}
#content {
margin:0;
background-color: #ffffff;
}
#footer {
margin: 0;
background-color: red;
}
</style>
</head>
<body>

<div id="header">
<h3>Header</h3>
</div>
<div id="content">
<p>Content</p>
</div>
<div id="footer">
<h3>Footer</h3>

</div>

</body>
</html>

jatar_k

9:57 pm on Oct 28, 2004 (gmt 0)

if you add this it works

p,h3 {
margin: 0px;
}

my syntax isn't very good though, so I would always double check what I say in this forum ;)

jaylark

9:57 pm on Oct 28, 2004 (gmt 0)

I'm no CSS expert so I don't know if this is the "correct" way to do it, but I put this in the CSS to get the effect you wanted.
p
{
margin: 0;
}
h3
{
margin: 0;
}

jatar_k

9:58 pm on Oct 28, 2004 (gmt 0)

by a hair jaylark ;)

chinaski

3:40 pm on Oct 29, 2004 (gmt 0)

I understand that I can style the p and the h3 tags to make the simple layoout look right. What I don't understand is why I have to.

I thought that by giving the divs a margin of 0, they would butt up against each other. Why do the existence of a block-level element like a p or h3 tag inside the div cause the layout to "break".

Any insight appreciated.

Lance

4:44 pm on Oct 29, 2004 (gmt 0)

Because the p and hx tags have default margins that need to be zero'd too.

createErrorMsg

4:58 pm on Oct 29, 2004 (gmt 0)

Unless I'm mistaken, this has to do with collapsing margins, in this case the margin of each parent elment (the div) and the margin of the child elements inside. If the <h3> has a default top margin of 10px, and the div has a margin of 0, that collapses to 10px (largest of the two). And since margins are transparent, the body background shows through. Setting the <h3> margin to 0 collapses two 0 margin elements to a margin of 0.

You can read more about collapsing margins here [w3.org].