CSS div's overlapping

Question

Я пытаюсь создать раздел комментариев для своего сайта. В разделе комментариев, я хочу, чтобы он выложил Wordpress-стиль, с аватаром слева. Он работает, но то, что происходит, это текст комментария, обертывающий вокруг аватара снизу. Например, here. Вероятно, это простое решение, но я amatuer для CSS. Это отношение XHTML и CSS:

<div class="comment"> 
<div class="left"> 
    <img src="images/noavatar.png" alt="No Avatar" /> 
</div> 

<div class="right"> 
    <h3>Laura Brauman</h3> 
    <span>12 March 09</span> 
    <p>Nunc ultrices nisi ut tellus. In placerat tempus quam. Nulla dolor nulla,dictum eget, auctor a, rutrum sit amet, ante. Sed scelerisque est.   Vestibulum arcu purus, dignissim nec, rhoncus id, sodales eu, quam. Nullam congue hendrerit enim. Phasellus risus. Pellentesque lacus sem, luctus tempus.</p> 
</div> 
</div> 


/*------- COMMENTS -------*/ 
#comments 
{ 
    width: 91px; 
    height: 18px; 
    background: url(images/comments.png) no-repeat; 
    text-indent: -9000px; 
    margin-bottom: 10px; 
} 

div.comment 
{ 
    padding: 5px 5px 30px 5px; 
    background: url(images/commentbar.png) bottom center no-repeat; 
    margin-bottom: 10px; 
} 

div.comment div.left { margin-left: 10px; float: left; width: 51px; } 
div.comment div.right { width: 482px; } 
div.comment div.right h3 { color: #e6267c; font-size: 18px; display: inline; text-transform: uppercase; } 

Answer 1

Добавить это div.right

margin-left: 51px; 

Answer 2

То, что вы видите, это что встроенные элементы будут уважать поплавки, но элементы уровня блока не делают. Вы должны вручную разместить вокруг них, или поплавки будут перекрывать их.

Либо это, либо поплавок другого элемента уровня блока.

Answer 3

div.right { float: left; width: 482px; } 

Answer 4

От spec:

Поскольку поплавок не в потоке, не позиционированные боксы блока, созданные до и после того, как поле флоат текут вертикально, как если поплавок не существовало.

Это означает, что элементы с display: block, которые не расположены, игнорируют поплавок.

Однако линейные поля, созданные рядом с поплавком, сокращаются, чтобы освободить место для поля поля поплавка.

Это означает, что встроенные элементы действительно текут вокруг поплавков. Вот почему ваш <span> и текст в пределах <p> обтекают div.left, хотя <p> инет.

Граница коробка таблицы, блок-уровень заменен элемент, или элемент в нормальном потоке, который устанавливает новый контекст форматирования блока (например, элемент с «переполнением», кроме «видимого») должны не перекрывать любые поплавки в том же контексте форматирования блоков, что и сам элемент. Если необходимо, реализации должны очистить упомянутый элемент, поместив его ниже любых предыдущих поплавков, но может поместить его рядом с такими поплавками, если имеется достаточное пространство.

И, что - тупой как есть - это ответ на вашу проблему. Вы должны вставить «новый block formatting context».

поплавков, абсолютно позиционированы элементы, встроенные-блоки, настольные клетки, настольные подписи, а также элементы с «переполнением», кроме «видимого» (кроме случаев, когда это значение было распространено на видовой) создать новый блок форматирование контекстов.

Самый простой из них для вас 1:

div.right { overflow: auto; } 

Обратите внимание, что вы, вероятно, также хотите 1:

div.comment { overflow: auto; } 

Чтобы исправить связанный, но другая проблема. Если ваш контент <p> короче вашего изображения, то плавающий div.left не будет расширять высоту div.comment. Добавление overflow: auto; перенесет вас в точно названной Complicated Cases части спецификации:

Если [на уровне блоков, незамещаемые элементов в нормальном потоке, когда «переполнение» не рассчитывает на «видимый»] элемент имеет какие-либо плавающей потомки которых нижний край поля ниже дна, то высота увеличивается, чтобы включить эти края

который в основном говорит, что поплавки только расширить overflow <> visible, содержащие элементы.

1overflow: hidden; также будет работать, но обрезает контент, а не бросает полосы прокрутки, если необходимо.