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