Why are my divs overlapping?

Question

I'm trying to create a parent div inside a list element that contains two children div for the left and right. The left will contain an image and the right will contain two additional divs that contain some text and a timestamp.

I can't get the left and right divs to display without overlapping.

My HTML Looks like this:

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

Take a look at this jsfiddle

What am I missing?

Answer 1

They are overlapping because you are floating a div, but aren't clearing the float.

Use the clearfix method to clear the float. Add a class container to your container divs and use this 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;
}

You'll also notice that I've removed your inline CSS. This makes your code easier to maintain.