Weird gaps with float left - php

Question

I am completely blocked on this problem, I am working with a CMS, and I am generating the articles, and I want them to be in two colums, so
here is the html code ( I deleted a bit of the php parts not to confuse you ):
<div id="contenu_col">
<?php
echo '<div class="col1">
<img src="square/'.$IMGACSQ.'" ><br/>
<p>'.aff($DATE).'<br/>'.aff($nom_projet).' - '.aff($ARTISTE).'</p></div>';
</div>
that generate an html code that look like that :
<div class="col1">
<a href="exhibition.php?ID=109">
<img src="square/E_3094_x.jpg" >
</a><br/>
<p>11.12. - 29.01.11.<br/>New impressions - New works - new artists - new space 5 and a happy new year)</p>
</div>
<div class="col1">
<a href="exhibition.php?ID=108">
<img src="square/BG_IoanGrosu06_x.jpg" >
</a><br/>
<p>30.10. - 04.12.10.<br/>Come here tomorrow - Ioan Grosu</p></div>
and the css :
.col1{
width:300px;
float:left;
padding: 3%;
display: block;
}
.col1 img{
width:100%;
}
.col1:after{
clear: both;
}
#contenu_col {
width:850px;
top:150px;
z-index:50;
left:460px;
position:absolute;
padding-bottom: 20px;
}
#contenu_col img{
width:100%;
}
( because I can't post images...)
It works 70% of the website; then sometimes some weird gap appears....
I don't understand what I'm doing wrong :(
RESOLVED.THANK YOU!!

Answer 1

Edit your col1 class and add a height,for example height:300px;
.col1 {
width: 300px;
float: left;
padding: 3%;
display: block;
height: 300px;
}
Also your DIV#encar isn't well styled.

Answer 2

it appears because .col1 height is not unified, try to add this to your css
.col1{
height: some value
}