2 DIVs nebeneinander ausrichten

[petz_e]

Hallo

Ich hab da ein kleines Problem mit dem Ausrichten von DIV-Container.

Wie auf dem Bild zu erkennen habe ich 2 DIVs in einem grossen DIV eingeschlossen. Da beide DIVs nebeneinander stehen sollten, habe ich den linken mit Float auf 'left' gesetzt.

Da beide DIVs jedoch unterschiedliche Inhalte haben, ragt der rechte DIV etwas über. Sie sollen aber beide die gleiche Höhe haben. Wenn ich 'height' des linken auf 100% setze, füllt er die gesamt Seite aus. Liegt das an meinem Floating?

Patrick

 

[ein schlauer]

Ja!

Ein grosse Mißverständniss beim Layouten mit CSS ist, dass viele Leute denken es verhält sich wie eine Tabelle, dem ist aber nicht so. Das ist ein grundlegender Unterschied zwischen CSS und Tabellen layout. Du willst ein Tabellenlayout, zwei Zellen, die miteinander verknüpft sind und eine gemeinsame Höhe annehmen. Im CSS Layout paßen sich die Elemente an den verfügbaren Platz an und nicht an anderen Elementen.

Glücklicherweise ist dein Tabellenlayout nicht so strikt auf die Tabellenzellen gemünzt, dass es nicht doch mit CSS lösbar wäre.

CSS Code:

#container {
	border:1px solid black;
	float:left;
	width:75%;
	margin:1em 10%;
	background-color:#f99;
}
#div1 {
	float:left;
	width:20em;
	background-color:#ff0;
	height:100%;
	
}
#div2 {
	margin-left:20em;
	height:100%;
	
}

<div id="container">
	
	<div id="div1">
	DIV 1:
	</div>
	
	<div id="div2">	DIV 2:	</div>
</div>

 

[petz_e]

OK, ich habs jetzt mal mit dieser Formatierung versucht. Leider erstrecken sich jetzt alle 3 Container über die gesamte Seitenhöhe und nicht nur um den höchsten Inhalt.

Patrick

 

[ein schlauer]

Dann hast du den Code verändert, bei mir sind sie nur so hoch wie der höchste Inhalt.

 

[petz_e]

LOL, nach der Mittagspause probiers ichs noch einmal in aller Ruhe aus.

Patrick