Need quick help with footer not being pushed down with margin-top property

HTML & CSS
1

Here is my HTML:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head
<body>
	<div id="container">
		<div id="header">
			<p>header</p>
		</div>
		<div id="div1">
			<p>fake div 1 text blah blah blah asdfasdfa sfdasdfasdf</p>
		</div>
		<div id="div2">
			<p>fake div 2 text blah blah blah asdfasdfa sfasdfasdfa</p>
		</div>
		<div id="footer">
			<p>footer</p>
		</div>
	</div>
</body>
</html>

And here is my CSS:

#container{
border: #999 1px solid;
position: relative;
width: 500px;
}

#header{
border: #999 1px solid;
margin-bottom: 30px;
}

#div1{
border: #999 1px solid;
float: left;
width: 228px;
margin: 0 10px;
}

#div2{
border: #999 1px solid;
float: left;
width: 228px;
margin: 0 10px;
}

#footer{
border: #999 1px solid;
margin-top: 30px;
clear: both;
}

p {
margin: 0;
}

I simply want the #footer to be pushed down 30px from the closest div. Why doesn’t giving it margin-top: 30px; push the entire div down 30 pixels from #div1???

Thanks so much in advance.

Luke

2

As #div1 and div#2 are floated, the margin-top of #footer ignores them. Instead, apply the margin to the bottom of the floated divs.

The CSS is the same for both, so only one rule is needed.

#div1, #div2 {
border: #999 1px solid;
float: left;
width: 228px;
margin: 0 10px 30px;
}

#footer {
border: #999 1px solid;
clear: both;
}
3

I figured I could do it that way. Thanks for the help.