Wie erstellt man ein Layout mit 2 Menüleisten in CSS?

Question

Ich habe die nächste Markierung:

<div id="lefttop"></div>
<div id="leftbottom"></div>
<div id="central"></div>

Ich benötige eine Markierung wie auf dem Bild unten gezeigt: Alt-Text http://img36.imageshack.us/img36/9894/makeupi.png

Answer 1

#lefttop, #leftbottom {float:left;width:200px;}
#leftbottom {clear:left;}
#central {margin-left:200px;float:right;width: the-width-you-need px}

Wenn ich es mir recht überlege, ist width:auto vielleicht die beste Wahl für #central

*Entschuldigung für die vielen Tippfehler vorhin

Answer 2

Können Sie #lefttop und #leftbottom zusammen in einem Div unterbringen? Wie

<div id="left-container">
    <div id="lefttop"></div>
    <div id="leftbottom"></div>
</div>

Auf diese Weise ist es einfacher, sie beide auf der linken Seite zu platzieren.

Answer 3

Dies kann tatsächlich etwas besser für Sie arbeiten, da alle drei divs skaliert/verschoben werden, um das Browserfenster anzupassen.

#lefttop {
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 50%;
    width: 200px;
    margin-bottom: 5px;
}

#leftbottom {
    position: absolute;
    top: 50%;
    left: 10px;
    bottom: 10px;
    width: 200px;
    margin-top: 5px;
}

#central {
    position: absolute;
    top: 10px;
    left: 220px;
    bottom: 10px;
    right: 10px;
    overflow: auto;
}