DIV-Layer 100% Auto Height

[developr]

Angenommen ihr habt ein solches DIV-Layout erstellt, wie bekommt man es nun hin, dass die Höhe des DIVs (hier: #body) automatisch an den Inhalt (hier: #content, #box) angepasst wird?


Früher habe ich das lässig mit einer Tabelle width="100%" gemacht, heute bekommt man für solche Schandtaten ja aber gleich links und rechts welche an die Ohren .

Hier das Workaround, was sowohl für den FF und IE7, als auch den IE6 funktioniert.

<style>
    body {
    height: 100%;
    }
    div#body {
    width: 600px;
    }
    div#content {
    float: left;
    width: 300px;
    }
    div#box {
    float: right;
    width: 300px;
    }
    div#clear {
    clear: both;
    }
</style>

<div id="body>
    <div id="content">
        <br />
        <br />
        <br />
        <br />
        asdasd<br />
        asd
    </div>
    <div id="box">
        <br />
        <br />
        asdasd
    </div>
    <!-- Weiteres DIV für einen clear einfügen -->
    <div id="clear">
        &nbsp;
    </div>
</div>