Как создать макет с 2 барами меню в CSS?

Question

У меня есть следующая разметка:

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

Мне нужна разметка, как показано на рисунке ниже: альтернативный текст http://img36.imageshack.us/img36/9894/makeupi.png

Answer 1

Можете ли вы собрать #lefttop и #leftbottom вместе в одном div? Как

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

Таким образом, легче получить их обоих слева.

Answer 2

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

Если подумать, ширина: auto может быть лучшим выбором для # central

* редактировать извините за все опечатки ранее

Answer 3

Это может на самом деле работать немного лучше для вас, так как все три деления будут масштабироваться / сдвигаться в соответствии с окном браузера.

#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;
}