CSS: Problem mit float

[balufreak]

Hallo zusammen!

Ich bastle wiedereinmal an einer Webseite herum. Dieses mal möchte ich alles gerne XHTML-Strict machen. Nun zu meinem Problem.

Ich habe 3 divs diese schreibe ich via <div id="bereiche">bla</div>, <div id="sonstiges">bla</div> und <div id="text">bla</div> an.

im css habe ich es folgendermassen gecodet:

#sonstiges {
    float:left;
    padding: 4px 4px 4px 4px;
    border: 1px solid #e6e6e6;
}
#bereiche {
    float:left;
    padding: 4px 4px 4px 4px;
    margin-right: 20px;
    border: 1px solid #e6e6e6;
}
#text {
    float:none; 
}

Damit möchte ich bezwecken, dass die beiden Bereiche "bereiche" und "sonstiges" nebeneinander sind und der Bereich "text" soll annschliessend ganz normal unten weiter gehen.

Im angefügten Bild seht ihr, wie es eben nicht aussehen sollte. Kann mir da jemand helfen?

Hier das Bild

Greets balu

 

[simusch]

versuchs mal mit einem

<br clear="all">

vor dem text-div

 

[dms]

Oder besser: ein clear:both; im CSS für das Div definieren.

 

[balufreak]

Super! Vielen dank! Beide Wege führten zum Ziel. Ich werde aber das clear:both verwenden, da es übersichtlich im css liegt.

Vielen Dank!

 

[master_p]

Was genau bewirkt das dann (haben nämlich ab und an ein ähnliches Problem)?

 

[Trey]

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear