I came across the following layout on the web and noticed that the divs do not align perfectly. The top of a lower div does not touch the bottom of the div above it when borders are removed, although they do when borders are added. There seems to be an issue where the header doesn't touch the nav section when borders are gone. Here is the code snippet:
<html>
<head>
<title>Example of a two-column layout from the internet</title>
<link rel="stylesheet" href="styles2.css"/>
</head>
<body>
<div id="wrapper">
<div id="header"><h1>Main Heading</h1></div>
<div id ="nav">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
<li><a href="#">Option 5</a></li>
</ul>
</div><!--navigation -->
<div id ="main">
<h2>Column 1 #Main (float: left)</h2>
<p>This is column one, containing text, images, etc.</P>
<p>Note that the sum of the widths must add up to the width of the wrapper.
Also note that adding a border to the main div shifts the sidebar down by 2 pixels.
Increasing the wrapper size by 2px resolves this issue, indicating that
a div's size does not include borders.
</p>
</div><!-- main-->
<div id="sidebar">
<h2>Column 2 #Sidebar (float:right)</h2>
<p>Content for column two goes here...</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<div id="footer">
<p>Footer Section</p>
<p>Without the clear both property added to the footer, it doesn't sit below the content but rather underneath the floated elements.
Floating an element removes it from the document flow. Prior to floating, the footer behaves as expected by sitting below the sidebars.
</p>
</div>
<div><!-- end wrapper often used to center the site-->
</body>
</html>