Probleme mit IE bei einfachem 3-Spalten-Layout

[Wennä]

Hallo,

ich versuche gerade ein einfaches 3-Spalten-Layout zu erstellen, bei dem sich die Hintergründe aller 3 Spalten bis nach unten erstrecken sollen:

Ein div um die 3 Spalten herum, dessen Hintergrundfarbe auch für die beiden seitlichen Spalten gelten soll.

div#mainwrap  {
  width: 800px;
  margin: 0px auto;
  background-color: #222;
  }

Die beiden seitlichen Spalten gefloatet, und die mittlere Spalte dazwischen:

div#info  {
  width: 200px;
  float: left;
  }

div#nav  {
  width: 200px;
  float: right;
  }

div#content  {
  margin: 0 210px;
  background-color: #444;
  }

Falls eine der seitlichen Spalten länger als die mittlere ist, soll diese sich bis zu der unteren Kante erstrecken, mit entsprechender Hintergrundfarbe. Dazu wird in div#content ein clearing div eingefügt.

<div id="mainwrap">
<div id="info">
</div>

<div id="nav">
</div>

<div id="content">
<div style="clear: both; height: 0; visibility: hidden; display: block;">.</div>
</div>
</div>

In Opera und FF funktioniert das auch wunderbar. In IE sehe ich aber Lücken in div#content, d.h. Bereiche in denen Teile der Box fehlen. Ausserdem schliesst die Box links mit dem div#mainwrap ab.

Ich habe schon ein bisschen mit diversen Hacks rumexperimentiert. Wenn
ich den Holly Hack div#content {height: 1%;} anwende, dann spielt IE nicht mehr verrückt. Allerdings reicht dann die mittlere Spalte nicht mehr bis nach ganz unten, sondern wird direkt nach div#content gecleart.

Ich hoffe trotz, oder gerade wegen der länglichen Erklärung ist das Problem klargeworden, und jemand kann mir etwas weiterhelfen.

Ciao