Divs bleiben nicht im äußeren & Div wird nicht zentriert...

[Dome]

Hi,
ich häng grad an n paar Divs einer Bildergalerie...
Ich häng mal zwei Screen mit an falls ich den Quelltext ändere...
Hier mal der Link: http://abschluss10a06.ab.funpic.de/g...p?show=galerie
Auf den Screens kann man am bessten erkennen wie ich das gerne hätte...

Und hier der Quelltext:

<style type="text/css">
<!--
body {
	font-family: Tahoma, Verdana, Arial, "Times New Roman", Times, serif;
	font-size: 12px;
	background-color: #E6E7FF;
}
.erklaerung {
	font-size: 10px;
}
.pic {
	padding: 4px;
	border: 1px solid #000000;
	margin: 2px;
	font-size: 10px;
	background-color: #FFFFFF;
	float: left;
}
div.pic:hover {
	background-color: #EEFFE6;
}
div.pic:active {
	background-color: #FFE6E6;
}
.pic_container {
	margin: 2px;
	clear: left;
	padding-top: 2px;
	padding-right: 4px;
	padding-bottom: 4px;
	padding-left: 4px;
	font-family: Tahoma, Verdana, Arial, "Times New Roman", Times, serif;
	height: auto;
	width: auto;
}
.galerie_container {
	background-color: #FEFFE6;
	text-align: center;
	border: 1px solid #000000;
	height: auto;
}
.pic_image {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	margin-top: 2px;
}
-->
</style>
Anzeige: <a href="?show=beta" target="_self">#1</a> | <a href="?show=galerie">#2</a> | Anordnen:
<a href="?show=galerie&order_by=solution&direction=asc" target="_self">Auflößung:<img src="/images/s_asc.png" alt="asc" width="11" height="9" border="0" /></a><img src="/images/g_desc.png" alt="desc" width="11" height="9" border="0" /> | 
<a href="?show=galerie&order_by=filesize&direction=asc" target="_self">Dateigröße:<img src="/images/s_asc.png" alt="asc" width="11" height="9" border="0" /></a><img src="/images/g_desc.png" alt="desc" width="11" height="9" border="0" /> | 
<a href="?show=galerie&order_by=upper_id&direction=asc" target="_self">Uploader:<img src="/images/s_asc.png" alt="asc" width="11" height="9" border="0" /></a><img src="/images/g_desc.png" alt="desc" width="11" height="9" border="0" /> | 

<a href="?show=galerie&order_by=uploaddatum&direction=asc" target="_self">Uploaddatum:<img src="/images/s_asc.png" alt="asc" width="11" height="9" border="0" /></a><img src="/images/g_desc.png" alt="desc" width="11" height="9" border="0" /> | 
<a href="?show=galerie&order_by=kategorie&direction=asc" target="_self">Kategorie:<img src="/images/s_asc.png" alt="asc" width="11" height="9" border="0" /></a><img src="/images/g_desc.png" alt="desc" width="11" height="9" border="0" /> | 
<br /><span class="erklaerung">Erklärung: Aktuell: <img src="/images/g_asc.png" /><img src="/images/g_desc.png" /> | Nach x anordnen: <img src="/images/s_asc.png" /><img src="/images/s_desc.png" /></span><br />
<div class="galerie_container">
	<div class="pic_container">
		<div class="pic">
			<u>Test Bild nr. 1</u><br />

			<a href="images/kategorie_titel_1/00000000004.jpg" target="_blank"><img src="thumbs/00000000004.jpg" class="pic_image"/></a><br />
			Kategorie-Titel 1
		</div>
		<div class="pic">
			<u>Test Bild Nr. 2</u><br />
			<a href="images/kategorie_titel_1/00000000005.jpg" target="_blank"><img src="thumbs/00000000005.jpg" class="pic_image"/></a><br />
			Kategorie-Titel 1
		</div>
		<div class="pic">

			<u>Test Bild Nr. 3</u><br />
			<a href="images/kategorie_2/00000000006.jpg" target="_blank"><img src="thumbs/00000000006.jpg" class="pic_image"/></a><br />
			Kategorie 2
		</div>
		<div class="pic">
			<u>Test Bild Nr. 4</u><br />
			<a href="images/kategorie_2/00000000007.jpg" target="_blank"><img src="thumbs/00000000007.jpg" class="pic_image"/></a><br />
			Kategorie 2
		</div>

		<div class="pic">
			<u>Noch mal test</u><br />
			<a href="images/kategorie_titel_1/00000000008.jpg" target="_blank"><img src="thumbs/00000000008.jpg" class="pic_image"/></a><br />
			Kategorie-Titel 1
		</div>
		<div class="pic">
			<u>defasfgdfh</u><br />
			<a href="images/kategorie_titel_1/00000000009.jpg" target="_blank"><img src="thumbs/00000000009.jpg" class="pic_image"/></a><br />

			Kategorie-Titel 1
		</div>
	</div>
	<div class="pic_container">
		<div class="pic">
			<u>sdghghfr</u><br />
			<a href="images/kategorie_2/00000000010.jpg" target="_blank"><img src="thumbs/00000000010.jpg" class="pic_image"/></a><br />
			Kategorie 2
		</div>

		<div class="pic">
			<u>htrsertgerg</u><br />
			<a href="images/kategorie_titel_1/00000000011.jpg" target="_blank"><img src="thumbs/00000000011.jpg" class="pic_image"/></a><br />
			Kategorie-Titel 1
		</div>
		<div class="pic">
			<u>erherhetg</u><br />
			<a href="images/kategorie_2/00000000012.jpg" target="_blank"><img src="thumbs/00000000012.jpg" class="pic_image"/></a><br />

			Kategorie 2
		</div>
		<div class="pic">
			<u>eretzhrzrt</u><br />
			<a href="images/kategorie_2/00000000013.jpg" target="_blank"><img src="thumbs/00000000013.jpg" class="pic_image"/></a><br />
			Kategorie 2
		</div>
		<div class="pic">
			<u>test</u><br />

			<a href="images/kategorie_titel_1/00000000014.jpg" target="_blank"><img src="thumbs/00000000014.jpg" class="pic_image"/></a><br />
			Kategorie-Titel 1
		</div>
		<div class="pic">
			<u>Test Titel</u><br />
			<a href="images/kategorie_titel_1/00000000015.jpg" target="_blank"><img src="thumbs/00000000015.jpg" class="pic_image"/></a><br />
			Kategorie-Titel 1
		</div>
	</div>

	<div class="pic_container">
		<div class="pic">
			<u>kjlkj</u><br />
			<a href="images/kategorie_titel_1/00000000016.jpg" target="_blank"><img src="thumbs/00000000016.jpg" class="pic_image"/></a><br />
			Kategorie-Titel 1
		</div>
		<div class="pic">
			<u>eartrtr</u><br />

			<a href="images/kategorie_titel_1/00000000017.jpg" target="_blank"><img src="thumbs/00000000017.jpg" class="pic_image"/></a><br />
			Kategorie-Titel 1
		</div>
		<div class="pic">
			<u>terteg</u><br />
			<a href="images/kategorie_titel_1/00000000018.jpg" target="_blank"><img src="thumbs/00000000018.jpg" class="pic_image"/></a><br />
			Kategorie-Titel 1
		</div>
		<div class="pic">

			<u>fdgdgf</u><br />
			<a href="images/kategorie_titel_1/00000000019.jpg" target="_blank"><img src="thumbs/00000000019.jpg" class="pic_image"/></a><br />
			Kategorie-Titel 1
		</div>
		<div class="pic">
			<u>gdfgdfgd</u><br />
			<a href="images/kategorie_titel_1/00000000020.jpg" target="_blank"><img src="thumbs/00000000020.jpg" class="pic_image"/></a><br />
			Kategorie-Titel 1
		</div>

		<div class="pic">
			<u>dfgdfg</u><br />
			<a href="images/kategorie_titel_1/00000000021.jpg" target="_blank"><img src="thumbs/00000000021.jpg" class="pic_image"/></a><br />
			Kategorie-Titel 1
		</div>
	</div>
	<div class="pic_container">
		<div class="pic">
			<u>rsthrths</u><br />

			<a href="images/kategorie_titel_1/00000000022.jpg" target="_blank"><img src="thumbs/00000000022.jpg" class="pic_image"/></a><br />
			Kategorie-Titel 1
		</div>
		<div class="pic">
			<u>r4ta4trwettr</u><br />
			<a href="images/kategorie_titel_1/00000000023.jpg" target="_blank"><img src="thumbs/00000000023.jpg" class="pic_image"/></a><br />
			Kategorie-Titel 1
		</div>
	</div>

</div>
<br /><br /><center><font face="Tahoma, Verdana, Arial, Times New Roman, Times, serif" size="-1">Status: <b>Beta-3</b></font></center>

Ich hoffe ihr versteht was ich meine und könnt mir helfen...

[Nele]

Benutzt du den Firefox? Falls ja, kann ich dir die Aardvark-Extension empfehlen. Da hab ich den Fehler gleich gesehen.

Du müßtest vor dem abschließenden </div> des .galerie_containers noch ein clearendes div (oder was auch immer) einbauen. Es reicht leider nicht aus, das im .pic_container zu tun.

[Dome]

Ich verwende sowohl den FF als auch die Aardvark-Extension, doch die hab ich total vergessen
Danke auch für die schnelle Antwort
Also ich werds mal versuchen...

EDIT

Also das hat ja super funktioniert Wieso bin ich da nicht drauf gekommen? Ist doch logisch... naja

Achja weißt du vielleicht warum ich das ganze teil nicht zentrieren kann? Mit noch einem Div?

[Dome]

Also hab jetzt noch ein Problem: (ich glaube es liegt an dem clear, weis aber nicht wie ich das verhindern kann)
http://abschluss10a06.ab.funpic.de/?...on=desc&page=0
Die Divs mit den Bildern fangen erst unterhalb der Navi an... Wie kann ich das verhindern?

Und das mit dem zentrieren hab ich auch noch nicht hinbekommen

Danke für die Hilfe

[IMBild]

Für jedes Bild ein Div ! Da brauchst dich dann aber auch nich wunder wenns Probleme gibt.
Steck die Bilder in 1 Div und floate sie schön der Reihe nach durch und halte sie mit Margin auf Abstand zu einander,..
deine unteren kannst dann auch so zentrieren !

EDIT:

(ich glaube es liegt an dem clear, weis aber nicht wie ich das verhindern kann)

Du musst dein pic container rechts clearen:
.galerie_pic_container {
margin: 3px;
clear:right;
padding-top: 2px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;
font-family: Tahoma, Verdana, Arial, "Times New Roman", Times, serif;
color: #000000;

Dann funktioniert es. Allerdings solltest du ehrlich über die oben beschriebene lösung nachdenken :-)

EDIT2: noch sinnvoller allerdings wäre es den pic container überhaupt nicht zu clearen.
da einfach nicht nötig