Мои divs ontop друг от друга

Это мой макет сайта, но по какой-то причине мое левое меню слева проходит через нижний колонтитул вместо того, чтобы толкать его туда, где он принадлежит. Я пробовал ясно: оба; и переполнение автоматически, но я не могу заставить его спуститься. Что я здесь делаю неправильно? вот jsfiddle: http://jsfiddle.net/Qd3Rr/1/Мои divs ontop друг от друга

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="nl"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>The Perfect Fluid Width Layout</title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<!--[if lt IE 7]> 
    <link rel="stylesheet" type="text/css" href="style-ie.css" /> 
<![endif]--> 
</head> 

<body> 

    <div id="inside"> 
     <div id="header"> 
      <table> 
       <form action="index.php" method="GET"> 
        <tr><th>Zoek: </th><td><input type="text" name="searchword" value=""></td></tr> 
        <tr><th><input type="submit" value="submit"></td></tr> 
       </form> 
      </table> 
     </div> 

     <div id="navigation"> 
      <ul> 
       <li><a href="index.php">Home</a></li> 
       <li><a href="newadvertentie.php">Nieuwe Advertentie</a></li> 
       <li><a href="advertenties.php">Advertenties</a></li> 
       <?php 
       session_start(); 
       if(isset($_SESSION['username'])){ 
        echo '<li><a href="logout.php">Logout</a></li>'; 
       }else{ 
        echo'<li><a href="register.php">Register</a></li>'; 
        echo'<li><a href="login.php">Login</a></li>'; 
       }?> 
      </ul> 
     </div> 

     <div id="mainpage"> 

      <div id="left-menu"> 
        <h2>Kleding</h2> 
        <a href=>Shirts</a><br> 
        <a href=>Broeken</a><br> 
        <a href=>Jassen</a><br> 
        <a href=>Mutsen</a><br> 
        <a href=>Sjaals</a><br> 
        <a href=>Wanten</a><br> 
        <a href=>Schoenen</a><br> 
        <a href=>Sportkleding</a><br> 
        <a href=>Sweaters</a><br> 
        <a href=>Vesten</a><br> 
        <a href=>T-shirts</a><br><br> 
        <a href=>overig</a><br><br> 

        <h2>Geslacht</h2> 
        <a href=>Jongens</a><br> 
        <a href=>Meisjes</a><br> 
        <a href=>Beide</a><br> 

        <h2>Maten</h2> 
        <a href=>50(0-1 mnd)</a><br> 
        <a href=>56(1-2 mnd)</a><br> 
        <a href=>62(2-4 mnd)</a><br> 
        <a href=>68(4-6 mnd)</a><br> 
        <a href=>74(6-9 mnd)</a><br> 
        <a href=>80(9-12 mnd)</a><br> 
        <a href=>86(1-1,5 jaar)</a><br> 
        <a href=>92</a><br> 
        <a href=>98</a><br> 
        <a href=>104</a><br> 
        <a href=>110</a><br> 
        <a href=>116</a><br> 
        <a href=>122</a><br> 
        <a href=>128</a><br> 
        <a href=>134</a><br> 
        <a href=>140</a><br> 
        <a href=>146</a><br> 
        <a href=>152</a><br> 
        <a href=>158</a><br> 
        <a href=>164</a><br> 
        <a href=>176</a><br> 
      </div> 
      <div id="main-content"> 
       <form action="login.php" method="post"> 
        <table> 
        <tr><th><td><input type="text" name="username"></td></tr></th> 
        <tr><th><td><input type="password" name="password"></td></tr></th> 
        <tr><th><td><input name="submit" type="submit" value="submit"></td></tr></th> 
        </table> 
       </form> 
      </div> 
     </div> 

     <div id="footer"> 
      <p>footer</p> 
     </div> 
    </div> 
</body> 

</html>

CSS:

#inside{ 
margin:8%; 
padding:10px; 
background:white; 
} 

#header{ 
border:1px solid; 
background:#6F4E37; 
height:60px; 
} 

#navigation{ 
border:1px solid; 
height:29px; 
margin-top:2%; 
margin-top:1%; 
margin-bottom:1%; 

} 

#navigation ul 
{ 
margin: 0; 
padding: 0; 
} 

#navigation ul li 
{ 
list-style-type: none; 
display: inline; 
} 

#navigation li a 
{ 
display: block; 
float: left; 
padding: 5px 10px; 
text-decoration: none; 
border-right: 1px solid#ccc; 
} 

#navigation li a:hover { 
background:#E42B2B; 
} 

#mainpage{ 
margin-top:1%; 
margin-bottom:1%; 
min-height:300px; 
} 

#left-menu{ 
float:left; 
width:18%; 
background:#6F4E37; 
border:1px solid; 
} 

#left-menu h1{ 
float:left; 
width:18%; 
background:#6F4E37; 
border:1px solid; 
padding:10px; 
} 

#left-menu a{ 
padding: 15px; 
text-decoration: none; 
} 

#main-content{ 
border:1px solid; 
width:78%; 
padding:5px; 
margin-left:21.20%; 
min-height:500px; 
} 

#footer{ 
border:1px solid; 
margin-top:1%; 
height:60px; 
text-align:center; 
}

источник

2013-11-18 Robin

Вы должны использовать clear:both; на конец <div id="mainpage">.
Как в DEMO(под кодом).

<div id="mainpage">  
    <div id="left-menu"> 
     ... 
    </div> 
    <div id="main-content"> 
     ... 
    </div> 
    <div class="clear"></div> 
</div>

Css: