Почему мои divs перекрываются?

Question

Я пытаюсь создать родительский div внутри элемента списка, который содержит два дочерних div для левой и правой. Слева будет содержать изображение, а справа будет два дополнительных div, которые содержат текст и временную метку.

Я не могу получить левый и правый divs для отображения без перекрытия.

Мой HTML выглядит следующим образом:

<ul class="activity-comments"> 
<li> 
<div style="border: solid 1px #ff0000;"> 
    <div style="float:left;border: solid 1px #0000ff;"> 
     <img src="http://localhost/new/img/sampleimg.png" class="thumb-small"> 
    </div> 
    <div> 
    <small>Some sample text here 1</small> 
    </div> 
    <div> 
    <small>Posted 1 day ago</small> 
    </div> 
</div> 
</li> 
<li> 
<div style="border: solid 1px #ff0000;"> 
    <div style="float:left;border: solid 1px #0000ff;"> 
     <img src="http://localhost/new/img/sampleimg.png" class="thumb-small"> 
    </div> 
    <div> 
    <small>Some sample text here 2</small> 
    </div> 
    <div> 
    <small>Posted 2 days ago</small> 
    </div> 
</div> 
</li> 
</ul> 

Взгляните на эту jsfiddle

Что мне не хватает?

Answer 1

Они перекрываются, потому что вы плаваете div, но не очищаете поплавок.

Используйте метод clearfix, чтобы очистить поплавок. Добавьте класс container к контейнеру дивы и использовать этот CSS:

http://jsfiddle.net/57PQm/7/

.container { 
    border: solid 1px #ff0000; 
    zoom: 1; /* IE6&7 */ 
} 

.container:before, 
.container:after { 
    content: ""; 
    display: table; 
} 

.container:after { 
    clear: both; 
} 

Вы также заметите, что я удалил свой встроенный CSS. Это упрощает работу с вашим кодом.

Answer 2

Интересно, если это то, что вы ищете: jsfiddle

Я добавил в img{display:block;}, как образы приходят с некоторой скрытой прокладкой, которая пихает elemets вниз.

Answer 3

Ваш эскиз устанавливает изображение на определенную высоту 41px. Либо измените размер изображения, либо измените размер div, либо установите переполнение внешнего div.