✔ Containerhöhe bei floatenden Divs

[aquasonic]

Hallo zusammen,

ich habe gerade ein Problem und stehe mächtig auf dem Schlauch. Habe kurz gesucht doch leider gerade nichts anständiges gefunden, obwohl mich dünkt dieses Problem hatten schon einige :S

Nunja, hier das Problem, folgender Code:

<div id="container" style="background-color: red">
	<div id="left" style="float: left; border: 3px solid black">bla<br>bla<br>bla</div>
	<div id="right" style="border: 3px solid green">blabla</div>
</div>

Eigentlich möchte ich den roten Hintergrund für den ganzen Container. Ich habe ihn aber nur in der grösse des DIVs "right". Wie kann ich dies machen dass sich die Containerhöhe so anpasst, wie das grösste DIV inmitten von diesem?

Danke für die Hilfe, auch wenn es nur einen Link auf einen anderen Beitrag sein sollte

 

[Maik]

Hi,

setz nach dem DIV #right das folgende DIV ein, um wieder den normalen Textfluss herzustellen:

/* EDIT 12:39h */

<div id="container" style="background-color: red">
        <div id="left" style="float: left; border: 3px solid black">bla<br>bla<br>bla</div>
        <div id="right" style="border: 3px solid green">blabla</div>
        <div style="clear:left;"></div>
</div>

Zusätzlich wirst du für das linke DIV eine Breitenangabe und für das rechte DIV den entsprechenden linken Außenabstand benötigen, damit sich die Rahmen der beiden Elemente nicht überschneiden.

 

[Gumbo]

Wozu das geschützte Leerzeichen? Damit gibt es doch nur eine zusätzliche 1px-Geisterzeile.

 

[Maik]

Es gab in der Vergangenheit Modelle, in denen die Gecko-Browser diese zusätzlichen Angaben benötigten, um die clear-Regel korrekt anzuwenden. Von daher gebe ich sie schon aus Gewohnheit (und "sicherheitsmäßig") mit an. Aber hier geht's scheinbar auch ohne, wie ich gerade festgestellt habe.

 

[aquasonic]

Danke, funktioniert wunderbar