CSS Container mit gleicher Höhe
Sollte es das Layout erfordern das zwei Div Container mit einem float auch die gleiche Höhe haben sollen hat man in der Regel ein Problem. Man kann sich damit behelfen bei Container mit einer Hintergrundgrafik auszustatten aber es gibt auch eine reine CSS Lösung.
Und zwar werden die Container nach unten mit einem Padding erweitert, in diesem Beispiel um 1000px. (Sollte das nicht ausreichen kann man den Wert auch einfach erhöhen) Um den gleichen Wert den das Padding hat wird mit einem negativen Margin der Container wieder angepasst. Die schwebenden (float) Container liegen wiederum in einem umschliessenden Div mit einem overflow: hidden welches verhindert das man den Bereich der durch das Padding erzeugt wird sieht.
So sieht der Code dazu aus:
<style>
.teaser-container {
overflow:hidden
}
.teaser-1, .teaser-2 {
background-color:#9F9;
padding-bottom:1000px;
margin-bottom:-1000px;
float:left;
width:40%;
margin-right:1%;
}
.teaser-1 {
background-color:#9F9;
}
.teaser-2 {
background-color:#FF9;
}
</style>
<div class="teaser-container">
<div class="teaser-1"><strong>Mehr Text:</strong><br />Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</div>
<div class="teaser-2"><strong>Weniger Text und doch gleich hoch.</strong><br />Nulla vitae elit libero, a pharetra augue.</div>
</div>Und so sieht das dann aus:
