margin-bottom not showing up in right place - css

Question

I have simple example with a header and content divs. I want there to be a 10 pixel margin after the header div, but it is showing up after the content div. The header div has two floating divs. Following is the code:
<style type="text/css"
div {border: 1px solid red;}
#container{width:680px;}
#header{margin-bottom:10px; background-color:yellow;}
#title{float:left;}
#link{float:right;}
#header_clear{clear:both;}
</style>
<div id="container">
<div id="header">
<div id="title">Header Title</div>
<div id="link" style="float:right;">
Link
</div>
<div id="header_clear"/>
</div>
<div id="content" style="background-color:brown;">
This is the body.
</div>
</div>
Here's what it looks like. You can see that the 10px margin is below the content div instead of the header div.
margin-bottom not working

Answer 1

<style type="text/css">
div {border: 1px solid red;}
#container{width:680px;}
#header{margin-bottom:10px; background-color:yellow;}
#title{float:left;}
#link{float:right;}
#header_clear{clear:both;}
</style>
<div id="container">
<div id="header">
<div id="title">Header Title</div>
<div id="link">
Link
</div>
<div id="header_clear"></div>
</div>
<div id="content" style="background-color:brown;">
This is the body.
</div>
</div>
Seems it didnt like the self closing div