[解決済み】なぜ私のdivは重なっているのですか？

質問

リスト要素内に親divを作成し、その中に左右2つの子divを作成しようとしています。 左側には画像、右側にはテキストとタイムスタンプを含む 2 つの div が含まれる予定です。

左右のdivが重ならずに表示されないのですが。

私の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

何が足りないのでしょうか？

解決方法は？

divをフローティングしているのに、フローティングを解除していないため、重なっている。

clearfixメソッドを使用して、フロートをクリアしてください。クラスを追加する 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を削除していることにお気づきでしょう。これにより、コードのメンテナンスが容易になります。