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.

Answer 2

I wonder if this is what you are looking for: jsfiddle

I added in img{display:block;} as images come with some hidden padding that shoves elemets down.

Answer 3

your thumbnail is setting the picture to a specific height of 41px. Either change the picture size, or change the div size or set the overflow of the outer div.