Div не расположен ниже абсолютного div

Question

У меня есть следующий код на http://jsfiddle.net/qPtXL/

Как видите, проблема в том, что #footer не находится ниже #contents, если текст .body не длиннее .sidebar..sidebar находится в абсолютном положении, а .body имеет оставленное поле, поэтому я не использую плавающие переменные для сохранения переменной ширины .body.

У кого-нибудь есть предложения относительно того, как я могу сделать#footer сидеть ниже #contents, если такая ситуация?

Answer 1

обычно это легко сделать так: http://jsfiddle.net/qPtXL/4/

parent: overflow: hidden
left: float: left
content: overflow: hidden

нет отображения noob: ячейка таблицы и т.д .;)

абсолютное положение отводит элементы от потока. это как новый независимый слой в фотошопе. единственное, что вы можете сделать, это установить его позицию и высоту \ ширину относительно ближайшего родителя с позицией: относительный

IE6: http://jsfiddle.net/qPtXL/10/

Answer 2

Также вы можете попробовать, добавив элементы с плавающей точкой в ​​ваш CSS.Вот исправление для вашей проблемы.Я удалил некоторые свойства из вашего CSS и добавил несколько.Следующим будет ваш CSS.

#header, #footer { border: 1px solid red; padding: 10px; font-size: 20px; }
#contents { position: relative; background: url(../img/sidebar.gif) repeat-y; }
#contents .sidebar { width: 220px; padding: 20px; float:left}
#contents .body { padding: 20px 20px 20px 0; margin-left: 280px;  border: 1px solid green; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}

И вам нужно добавить класс "clearfix" в ваш HTML.

<div id="contents" class="clearfix">

Спасибо, Рамеш