Mam kod który pobiera i wyświetla 4 ostatnio dodane zdjęcia
Najpierw to:
<div style="width:590px;"> <!--otworzenie pódelka--> <div class="sr" style="width:560px;"> <p class="naglowek">» Ostatnio dodane zdjecia przez uzytkowników
</p></div> <div style="background:#f1f2ff;" id="xD"> <!--nadanie koloru-->
<? include("mods/galeria_user.php"); // dodanie galerii ?>
</div> <!--nadanie koloru end--> <div class="sr_d" id="szer"></div>
</div> <!--zamkniecie pudelka-->
galeria_user.php:
<?
$sql = mysql_query("SELECT * FROM `galeria_users` ORDER BY `galeria_users`.`id` DESC LIMIT 4"); if($rows == 0)
{
echo '<font size="2px"><center>Brak zdjęć</center></font>'; }
for($i=0; $i < $rows; $i++)
{
// 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>
<?
{
$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>
» Dodano:
<? echo $data; ?><br>
» 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>
<?
}
?>
i css
#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;
}
w rezultacie otrzymuje coś takiego

jak widzicie źle to wygląda
usunę lub zmienię wartość dla float

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?