Anonymní profil JohnyCSS – Programujte.com

Ahoj, chtěl bych Vás požádat o pomoc :)

Momentálně vytvářím jednoduchý web pro prezentaci svých fotek (zatím na localhostu). Layout stránky mám hotový (header, content, footer).

Do content jsem cyklem vypsal všechny alba (náhled, název alba, datum), a to tak že pro každé album sem vytvořil <div class="album">náhled, název alba, datum</div>.

Problém je v tom, že nevím jak správně napozicovat DIVy-alba od druhého řádku. div.album má automatickou výšku - pro případ, že fotka bude na výšku. Šířku a okraje má pevné.

Problém v příkladu:

Když bude první a třetí album (na prvním řádku) na výšku např. 380px a druhé album mezi nimi bude na šířku - výška např. 200px, vytvoří se pod druhým-prostředním albem mezera mezi prvním a třetím albem těch 180px. Jde o to, že když použiju uvedený kód, druhý řádek se zobrazí špatně. Dejme tomu, že alba na druhém řádku budou všechny na šířku (šířka pevných 300px + okraje a výška 200px). Chtěl bych aby se první a třetí album ve druhém řádku zobrazily těsně (s okrajem 10px) pod prvním a třetím albem prvního řádku a druhé album ve druhém řádku "zasáhlo" do prvního řádku těsně pod druhé album v prvním řádku (s okrajem 10px).

Jednoduše řečeno, chci aby každé album (tzn. album na šířku i na výšku) mělo pevnou šířku 300px, pevný krajní a spodní okraj - tzn. byly těsně na sobě s uvedeným okrajem.

Příklad na obrázku:

• červená = boční okraje 15px
• modrá = spodní okraje 10px
• zelená = divy-alba s pevnou šířkou 300px a automatickou výškou

Připojen obrázek.

<div id="content">
	<div class="album">
		zde je obrázek, název alba a datum
	</div>
	<div class="album">
		zde je obrázek, název alba a datum
	</div>
	<div class="album">
		zde je obrázek, název alba a datum
	</div>
	<div class="album">
		zde je obrázek, název alba a datum
	</div>
</div>

div#content{
	width: 960px;
}

div.album{
	width: 300px;
	height: auto;
	float: left;
	margin-left: 15px;
        margin-bottom: 10px;
}