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 tw

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.