[Darstellungsfehler] genug Platz für alle

[Zeitgenosse]

Hallo,

neues Problem. Habe in einem Container noch einmal 4 Subcontainer reingepackt. Nachdem ich die Ecken abgerundet habe, ist nur noch Platz für drei (nebeneinander), der vierte wurde nach unten verschoben.
Habe eine feste Breite des Hauptcontainer und hatte vorher eine 25%-Verteilung. Klappte alles ganz gut, bis ich auf die Idee mit den Ecken kam.
Hat vielleicht jemand eine Lösung? Danke Euch.

herzlich, Sven.

<div id="content">
	<div id="content_1">
	  <h1>Angebot 1 </h1>
	  <p></p>
	  <p>Produkt:  </p>
	  <p>Preis: </p>
	  <p>Funktions&uuml;bersicht:</p>
	  <p>Demo</p>
	  <p>&nbsp;</p>
	  <p>Ich m&ouml;chte dieses Angebot nutzen  </p>
	  <p>&nbsp; </p>
	</div>
	<div id="content_2">
	  <h1>Angebot 2</h1>
	  <p></p>
	  <p>Produkt:</p>
	  <p>Preis:</p>
	  <p>Funktions&uuml;bersicht:</p>
	  <p>Demo:</p>
	  <p>&nbsp;</p>
	  <p>Ich m&ouml;chte dieses Angebot nutzen  </p>
	</div>
	<div id="content_3">
	  <h1>Angebot 3</h1>
	  <p></p>
	  <p>Produkt:</p>
	  <p>Preis:</p>
	  <p>Funktions&uuml;bersicht:</p>
	  <p>Demo</p>
	  <p>&nbsp;</p>
	  <p>Ich m&ouml;chte dieses Angebot nutzen  </p>
	</div>
	<div id="content_4">
	  <h1>Angebot 4 </h1>
	  <p></p>
	  <p>Produkt:</p>
	  <p>Preis:</p>
	  <p>Funktions&uuml;bersicht:</p>
	  <p>Demo</p>
	  <p>&nbsp;</p>
	  <p>Ich m&ouml;chte dieses Angebot nutzen </p>
	  <p>&nbsp; </p>
	</div>
</div>

#content {
	margin: 0 auto;
	width: 900px;
	height: 500px;
}
#content_1 {
	background: #990066;
	height: 500px;
	float: left;
	overflow: auto;
	border:1px solid #aaa;
	-moz-border-radius: 10px;
	-khtml-border-radius :10px;
	padding: 0px;	
}
#content_2 {
	background: #996699;
	height: 500px;
	float: left;
	overflow: auto;
	border:1px solid #aaa;
	-moz-border-radius: 10px;
	-khtml-border-radius :10px;
	padding: 0px;
}
#content_3 {
	background: #CC6633;
	height: 500px;
	float: left;
	overflow: auto;
	border:1px solid #aaa;
	-moz-border-radius: 10px;
	-khtml-border-radius :10px;
	padding: 0px;
}
#content_4 {
	background: #FF9933;
	height: 500px;
	float: left;
	overflow: auto;
	border:1px solid #aaa;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	padding: 0px;
}

[hero-master]

Bei mir werden alle 4 nebeneinander angezeigt
Woe siehst du das denn? Habs grad im FF3 und IE7 angeschaut

[Zeitgenosse]

Hallo,

also im FF3.01, Safari und Opera ist die Darstellung des letzten Containers unten. Im Opera werden außerdem die Ecken nicht abgreundet dargestellt.
Vielleicht gibt es ja noch eine Lösung?

herzlich, Sven.

[hero-master]

Zitat von Zeitgenosse

also im FF3.01, Safari und Opera ist die Darstellung des letzten Containers unten.

Kann ich, wie gesagt, nicht bestätigen
Hast du noch mehr im Quellcode, als deine Schnipsel oben?

Zitat von Zeitgenosse

Im Opera werden außerdem die Ecken nicht abgreundet dargestellt.

Der kennt weder "-moz", noch "-khtml"

[sejuma]

Was verstehst du unter "25-Prozent-Aufteilung"?
hast du jedem Container eine Breite von 25% gegeben oder von 1/4 der Gesamtbreite, das wären 1/4 von 900px = 225px.
Beides haut mit Rahmen nicht hin.

Du musst dabei noch die Rahmenbreiten von 2 x 1px je Container (linker und rechter Rahmen) berücksichtigen. Die verbreitern den Container, ebenso wie padding und margin.

Versuch also mal folgendes:
Weise jedem Subcontainer eine Breite von 223px zu.
Sofern du keinerlei Padding und Margin hinterlegt hast, müsste das hinhauen:
(223px width + 2px border) x 4 = 900px

Ob und wie sich die abgerundeten Ecken auch noch auf die Gesamtbreite auswirken ist mir nicht bekannt. Sie werden ohnehin nicht in jedem Browser dargestellt.

[Zeitgenosse]

Hallo,

ich hatte vorher 25% den einzelnen Containern zugewiesen. Meine Überlegung war die, dass sich die Breite der Subcontainer somit selbstständig an die Breite des Hauptcontainers anpasst. Ging aber nicht.
Mit Berücksichtigung der Rahmen klappt es.
Danke für den Tipp.

Herzlich, Sven.