[css]/[php] wyświetlanie zdjęć, problem z float Opcje

[Lejto]

Mam kod który pobiera i wyświetla 4 ostatnio dodane zdjęcia
Najpierw to:

[HTML] pobierz, plaintext 
<div style="width:590px;"> <!--otworzenie pódelka-->
			<div class="le"></div> 
			<div class="sr" style="width:560px;"> <p class="naglowek">&raquo; Ostatnio dodane zdjecia przez uzytkowników </p></div>
    		<div class="pr"></div>     
            <div style="background:#f1f2ff;" id="xD">     <!--nadanie koloru-->
 
             <? include("mods/galeria_user.php");  // dodanie galerii ?>
 
            </div> <!--nadanie koloru end-->
			<div class="le_d"></div>
			<div class="sr_d" id="szer"></div>
			<div class="pr_d"></div>   
 
 
 
    	</div> <!--zamkniecie pudelka-->
[HTML] pobierz, plaintext 

galeria_user.php:

[PHP] pobierz, plaintext 
<?
    $sql = mysql_query("SELECT * FROM `galeria_users` ORDER BY `galeria_users`.`id` DESC LIMIT 4");
    $rows = mysql_num_rows($sql);
    if($rows == 0)
        {
            echo '<font size="2px"><center>Brak zdjęć</center></font>';
        }
    
     for($i=0; $i < $rows; $i++)
    {  
    $row = mysql_fetch_array($sql);
      error_reporting(0);
 // zmiana rozmiaru itp
 
    $data = $row[data_dodania];
    ?>
 
    
<div id="gal" class="obraz">
    <dl>
    <dd class="img">
    <a href="java script:displayWindow1('galeria_users/foto_zoom.php?foto=pokaz&id=<? echo $row[id]; ?>=osoba&nr=<? echo $numerek; ?>',1000,800)">
     <img src="galeria_users/miniatury/<? echo $row[obraz];?>" width="<? echo $tn_width;?>" 
     height="<? echo $tn_height; ?>" onMouseOver="this.style.filter='alpha(opacity=50)'" onMouseOut="this.style.filter=''">
    </a> 
     <?
         if(!empty($wiersz[i_n]))
            {
                $zz = "($wiersz[i_n])";
            }
            else
            {
                $zz = " ";
            }    
    ?>            
    <br>
    <span id="obr">
     <a href="?kto=pokaz_profil&id=<? echo $wiersz[id];?>"><? echo $wiersz[user]; echo  $zz;?></a>
    </span>
    <br>
    &raquo; Dodano: <? echo $data; ?><br>
    &raquo; Komentarzy: <? echo  '('.$rows_komm.')'; ?><br>    
     </dd>
    <dd>
    <span class="zoom">
        <a href="galeria_users/obrazy/<? echo $row[obraz]; ?>" rel="lightbox" border=0><img src="images/zoom.gif" align="right" border="0"></a>
    </span>
    </dd>
    </dl>
    </div>
     <?
    }
    
?>
[PHP] pobierz, plaintext 

i css

[HTML] pobierz, plaintext 
#gal{
		padding:0 0;
		border:1px solid #c8cdd2;
 		min-height:183px;
		font-size:11px;
		width:160px;
		height:183px;
		font-family:arial;
		text-align:center;
		float: left;
 
	}
	#gal dl{
 	    margin:2px 2px;
		padding:0;
		display:inline;
		text-align:center;
	}
	#gal dl dd.img{
		margin:0;
		text-align:center;
	}
	#gal dd.img img{
 	    padding: 4px;
		border:1px solid #D9E0E6;
		border-bottom-color:#C8CDD2;
		border-right-color:#C8CDD2;
		background:#fff;
		text-align:center;
	}
	#gal dd.info font{
		text-align:center;
		font-size:14px;
		float:left;		
	}	
	#gal dd.zoom{
		float:right;
		text-align:right;
	}
	.obraz{
 		PADDING-RIGHT: 0px;
		PADDING-LEFT: 0px;
		PADDING-BOTTOM: 0px;
		PADDING-TOP: 15px;
		MARGIN: 0px 0px 0px;
		FONT: 10px  Verdana, arial, Helvetica, sans-serif;
		COLOR: #000000;
		BACKGROUND-COLOR: #FAFAFA;
		background: url(/images/tlo_ramki.gif) repeat-x #FAFAFA;
		TEXT-ALIGN:center;
	}
[HTML] pobierz, plaintext 

w rezultacie otrzymuje coś takiego

(IMG:http://img223.imageshack.us/img223/7374/zleth4.gif)
jak widzicie źle to wygląda
usunę lub zmienię wartość dla float
(IMG:http://img515.imageshack.us/img515/6369/dobrzelu7.gif)
jest dobrze tylko obrazki wyświetlają się 1 pod 2
problem powoduje float: left; ze stylu css jak zmienię left na coś innego to jest dobrze ale obrazki wyświetlają się jeden pod 2 zamiast obok siebie. Jest jakieś rozwiązanie?