позиционирование трех разделов с помощью css

Question

Кто любит загадки?;)

У меня есть три подразделения:

<div id="login" />
<div id="content" />  
<div id="menu" />  

Как бы я определил стили CSS (не касаясь HTML), чтобы иметь menu-div в качестве левого столбца, login-div в правом столбце и content-div также в правом столбце, но под login-div.

Ширина каждого div фиксирована, но высота - нет.

Answer 1

#menu {
  position:absolute;
  top:0;
  left:0;
  width:100px;
}
#content, #login {
  margin-left:120px;
}

Почему именно так?Меню, стоящее последним в разметке, усложняет задачу.Возможно, вы также сможете размещать как содержимое, так и права входа в систему, и добавите к содержимому ссылку clear:right, но я думаю, что это может быть вашим лучшим выбором.Не видя общей картины, трудно предложить решение, которое определенно сработает в вашем случае.

---

Редактировать:Кажется, это тоже работает:

#content, #login {
  float:right;
  clear:right
}

---

Еще мысли:Абсолютное позиционирование не будет работать (или не будет работать хорошо), если вы хотите, чтобы столбцы располагались по центру.float, похоже, работает - до тех пор, пока вы можете получить какие-либо требования к типу границы между столбцами для соответствия решению float, возможно, вам лучше выбрать это.С другой стороны, если предполагается, что сайт должен быть выровнен по левому краю, я думаю, что абсолютный метод будет очень хорошо работать для ваших нужд.

Answer 2

Уплывает прочь...не идеально. Ответ Криса кажется, это лучшее решение.

#login {
  float: right;
  width: 400px;
  border: 1px solid #f00;
}

#content {
  clear: right;
  float: right;
  width: 400px;
  border: 1px solid #f00;
}

#menu {
  float: left;
  width: 400px;
  border: 1px solid #f00;
}

<div id="login">Login</div>
<div id="content">Content</div>
<div id="menu">Menu</div>