Back to CSS Tips
Preview: what the working site looks like.
read about UNcollapsing margins here
header {
	height: 80px;
	overflow: auto;/*this is the bit that fixes the uncollapsing margin problem*/
	background: url(burlap.jpg) repeat-x;
}
		

Click on the Markup and CSS links in the header above and copy/paste both entire codes into a new .html document. You can then test your new webpage both with and without the overflow: auto; to visually illustrate the uncollapsing margin issue.

Using a top border like this, border-top: 1px solid #000;, in place of overflow: auto; will fix it also.

The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body> 
    <div id="container">
                <header>
					<ul id="navlist">
						<li><a href="#">One</a></li>
						<li><a href="#">Two</a></li>
						<li><a href="#">Three</a></li>
						<li><a href="#">Four</a></li>
						<li><a href="#">Five</a></li>
					</ul>
                </header>
        <a href="http://www.complexspiral.com/publications/uncollapsing-margins/" id="demoLink">read about UNcollapsing margins here</a>
      <section>
        <pre class="htmlCode">
header {
	height: 80px;
	overflow: auto; /*this is the bit that fixes the uncollapsing margin problem*/
	background: url(burlap.jpg) repeat-x;
}
		</pre>
        <p>
            Click on the <strong>Markup</strong> and <strong>CSS</strong> links in the header above and copy/paste both entire codes into a new .html document. You can then test your new webpage both with and without the <code>overflow: auto;</code> to visually illustrate the uncollapsing margin issue.
        </p>
        <p>
        	Using a top border like this, <code>border-top: 1px solid #000;</code>, in place of overflow: auto; will fix it also. 
        </p>
        </section>
    <!--container--></div>  
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 820px;
	margin: 30px auto;
	overflow: auto;
	background: #f63;
}
header {
	height: 80px;
	overflow: auto;
	background: url(burlap.jpg) repeat-x;
}
ul#navlist {
	height: 18px;
	width: 660px;
	margin: 60px auto 0 auto;
	padding: 0;
	text-align: center;
}
	#navlist li {
		height: 18px;
		width: 130px;
		float: left; 
		display: inline;
	}
	#navlist li a {
		height: 18px;
		width: 130px;
		float: left;
		list-style-type: none;
		text-align: center;
		background: #faebd7;
		border: 1px solid #f5d7b4;
		color: #cd8162; 
		font: 60%  Lucida Grande, Lucida Sans Unicode, verdana, lucida, sans-serif;
	}
	#navlist li a:hover {
		color: #fff; 
		background: #dda0dd; 
	}
	#navlist a:active {background: #c60;} 
#demoLink {
	margin: 20px 0;
	display: block;
	text-align: center;
}
section {padding: 20px;}
code {
	font-size: 1.4em;
	color: #0f0;
}