✔ Problem bei mehreren Elementen ineinander

[Oelki]

Hallo
Ich bastle im Moment an einer Bildergalery.
Ausschnitt aus der Stylesheet:

.picdiv
{
	width:250px;
	height:260px;
	position:relative;
	float:left;
	vertical-align:bottom;
	text-align:center;
	font-size:11px;
}
.picdivover
{
	width:250px;
	height:260px;
	position:relative;
	float:left;
	vertical-align:bottom;
	text-align:center;
	font-size:11px;
	background-image:url(images/photoover.png);
	cursor:pointer;
}
.picover
{
	width:100%; 
	min-width:515px;
}

so nun der HTML Teil:

<div class="picover" id="picover">
            	<div id="pic_sort_1" class="usort">
              		A...
            		<div class="picdiv" onmouseover="this.className = 'picdivover';" onmouseout="this.className = 'picdiv';" onclick="window.location.href = 'index.php?album=2|2';"><img src="alben/rothenburg/thumbs/IMGP0910.png" alt=" " style="width: 230px; height: 175px; padding-top: 65px;"><br>IMGP0910.jpeg</div>
					<div class="picdiv" onmouseover="this.className = 'picdivover';" onmouseout="this.className = 'picdiv';" onclick="window.location.href = 'index.php?album=2|3';"><img src="alben/rothenburg/thumbs/IMGP0917.png" alt=" " style="width: 230px; height: 175px; padding-top: 65px;"><br>IMGP0917.jpeg</div>
					<div class="picdiv" onmouseover="this.className = 'picdivover';" onmouseout="this.className = 'picdiv';" onclick="window.location.href = 'index.php?album=2|4';"><img src="alben/rothenburg/thumbs/IMGP0919.png" alt=" " style="width: 175px; height: 230px; padding-top: 10px;"><br>IMGP0919.jpeg</div>
               	</div>
                <div id="pic_sort_2" class="usort">
                	B...
					<div class="picdiv" onmouseover="this.className = 'picdivover';" onmouseout="this.className = 'picdiv';" onclick="window.location.href = 'index.php?album=2|5';"><img src="alben/rothenburg/thumbs/IMGP0920.png" alt=" " style="width: 175px; height: 230px; padding-top: 10px;"><br>IMGP0920.jpeg</div>
               	</div>
</div>

Erklärung:
die Divs mit der Klasse picdiv enthalten meine Bilder. Dieser wechselt beim Hover auf picdivover.
die elemente mit der id "pic_sort_*" sind dann die "Unterkategorien" (kennt ihr vll vom MediaPlayer. Im oberen Beispiel wäre das nach Anfangsbuchstaben sortiert (A und B). Pro neuem "usort" soll eine neue Zeile angefangen werden. Dies wird zwar im Firefox erledigt, allerdings geht er wirklich nur eine Zeile runter und nicht die länge des Bildes.
Hoffe ich habe das so einigermasen verständlich formuliert. Wenn möglich würde ich eine Lösung bevorzugen, die in der Klasse picover nichts verändert.
Noch ein Hinweis:
die Klasse "usort" ist noch leer da habe ich schon einige versuche gemacht habs aber nicht geschafft.

 

[Maik]

Hi,

wenn ich deine Ausführung jetzt richtig verstanden habe, sollte dir das folgende Stylesheet weiterhelfen:

.usort { clear:left; }

 

[Oelki]

vielen Dank das hat geholfen... mit float habe ich mich noch nicht wikrlich auseinandergesetzt... zeit wirds