alzani: Problem mit div's

Beitrag lesen

Ich habe jetzt ein weiteres div in die umschließende Box gepackt, das nur 1px hoch ist und im css das Atribut "clear: left;" besitzt, sowie die gleiche border wie die Navi-Box, damit keine Lücke entsteht.
Jetzt wird es zwar im Firefox vernünftig dargestellt, aber im IE habe ich jetzt eine "Leerzeile" am Ende, wenn der Navigationsbereich kürzer ist als der Contentbereich:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
 * {
  margin: 0;
  padding: 0;
 }
 .main {
  margin-left: 10%;
  margin-top: 5%;
  width: 70%;
  border: 3px solid #1D107B;
 }
 .navi {
  float: left;
  width: 10em;
  border-right: 3px solid #1D107B;
 }
 .contentbox {
  margin-left: 10em;
  border-left: 3px solid #1D107B;
 }
 .clearer {
  height: 1px;
  clear: left;
  width: 10em;
  border-right: 3px solid #1D107B;
 }
</style>
</head>
<body>
 <div class="main">
  <div class="navi">
   <p>test test test test test test test test test test test test test test test test test test</p>
  </div>
  <div class="contentbox">
   <p>test test test test test test test test test test test test test test test test test test</p>
   <p>test test test test test test test test test test test test test test test test test test</p>
   <p>test test test test test test test test test test test test test test test test test test</p>
   <p>test test test test test test test test test test test test test test test test test test</p>
   <p>test test test test test test test test test test test test test test test test test test</p>
  </div>
  <div class="clearer"></div>
 </div>
</body>
</html>

Irgendwie ist habe ich das Gefühl, daß das keine saubere Lösung, sondern eher geproscht ist. Kann mir dazu vielleicht jemand einen Tip geben?

LG, alzani!