Zwei Div nebeneinander im in einem Div

[jackisback]

Hallo,
ich versuche jetzt schon eine ganze Weile Zwei Container in einem Div nebeneinander zu Positionieren so dass sich dass Umschließende DIV bei Größen Änderung der Inneren DIV's anpasst.

Mann sieht in der Mitte Zwei Rote Container die sich in einem Grünen befinden. Der Linke Rote läuft aber aus dem Grünen raus. Eigentlich sollte der Grüne Container seine Größe anpassen.

Hat jemand einen Rat?

<style type="text/css">

.styleBorderRed{
	border: 1px red  solid;
}
.styleBorderGreen{
	border: 1px green solid;
}
.styleBorderBlue{
	border: 1px blue solid;
}
.styleBorderOrange{
	border: 1px orange solid;
}


</style>


<div class="styleBorderOrange" style="padding: 10px;  width: 715px;">
			
	<div class="styleBorderGreen">&nbsp;</div>
	<div>&nbsp;</div>
	<div class="styleBorderGreen" style="padding:10px">
	<div class="styleBorderRed" style=" height: 308px; float:left; width: 219px; margin-right:10px"></div>
	<div class="styleBorderRed" style=" height: 209px;"></div>
	</div>
	<div class="styleBorderBlue" style="clear:both; margin-top: 20px">&nbsp;</div>
			
</div>

 

[Maik]

Hi,

Webmaster FAQ -> CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?.

mfg Maik

 

[jackisback]

Zwei Fragen noch wenn du gestattest.
1. kannst du erklären was dort passiert.
2. wie bekomme ich alles Zentriert unabhängig von der Größe des Gelben Div.

Danke und Gruß

 

[Maik]

• Du hast es versäumt, die Floats im grünen Block zu beenden, falls die Frage darauf abzielt.
• Eine horizontale Zentrierung erzielst du so:

<div class="styleBorderOrange" style="padding: 10px;  width: 715px; margin:0 auto;">

mfg Maik

 

[jackisback]

Großes Lob an deine Hilfsbereitschaft. +++

Das mit dem beenden des Floats, wie kann man sich das vorstellen. Gibt es dazu eine Referenz wo man die Logik nachlesen kann?

Ich verstehe das noch nicht so ganz.

 

[Maik]

How To Clear Floats Without Structural Markup

mfg Maik