Image over flow fix? - html

Question

I have two columns; first column goes for image and the second holds detail.
My problem is the image over flows to the next line
Adding overflow:auto; or inline-block; to div.portfolioitems_wrap didn't help me
list http://img577.imageshack.us/img577/7002/screenshot20121204at135.png
Maker
<div class="portfolioitems_wrap">
<div class="portfolioitems_column1">first image</div>
</div>
<div class="portfolioitems_column2">information of the institute</div>
<div class="portfolioitems_wrap">
<div class="portfolioitems_column1">first image</div>
</div>
<div class="portfolioitems_column2">information of the institute</div>
<div class="portfolioitems_wrap">
<div class="portfolioitems_column1"><img src="/image/nature.jpg" class="thumbnail" alt="nature" />
</div>
</div>
<div class="portfolioitems_column2">information of the institute
</div>
<div class="portfolioitems_wrap">
<div class="portfolioitems_column1">first image</div>
</div>
<div class="portfolioitems_column2">information of the institute</div>
<div class="clear"></div>
CSS
div.portfolioitems_wrap{
float: left;
width:100%;
color:#555555;
border-bottom: 1px solid #eee;
height: 1.5em;
margin-bottom: 1em;
}
div.portfolioitems_column1{
margin-right: 10px;
}
div.portfolioitems_column2{
float: left;
color:#555555;
width: 300px;
margin-left: -300px;
font-size: 80%;
}
div.portfolioitems_column1 .thumbnail
{
float:left;
margin-right:20px;
border:1px solid #979390;
width:80px;
margin-bottom: 5px;
}
div.clear{
clear: both;
}

Answer 1

Further to my comment above: http://jsfiddle.net/hp7dY/
Just the min-height seems to be enough to fix this

Answer 2

It looks like your DIV organization is a little confused, which is adding to your problem. I'm assuming that the portfolioitems_wrap DIV is supposed to enclose both columns. That said, the problem is more that you're fixing the height of each table row, instead of allowing it to be flexible based on the content.
Removing the height:1.5em; entry from allows your elements to fit in the DIV. You might also consider displaying the column elements as inline-block.
div.portfolioitems_wrap{
float: left;
width:100%;
color:#555555;
border-bottom: 1px solid #eee;
// height: 1.5em;
margin-bottom: 1em;
}
div.portfolioitems_column1{
margin-right: 10px;
display:inline-block;
width:100px;
float:left;
}
div.portfolioitems_column2{
color:#555555;
font-size: 80%;
display:inline-block;
width:300px;
float:left;
}
div.portfolioitems_column1 .thumbnail {
float:left;
border:1px solid #979390;
width:80px;
margin: 0px 10px 5px 10px;
}
div.clear{
clear: both;
}
Here's a working fiddle with some other minor adjustments to make it pretty:
http://jsfiddle.net/72HML/
Hope that helps.