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

Я пытаюсь создать родительский 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

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

Ответ 1

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

Используйте метод clearfix, чтобы очистить float. Добавьте container в свои контейнеры div и используйте этот 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. Это упрощает работу с вашим кодом.

Ответ 2

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

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

Ответ 3

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