✔ Fehler beim Floating

[Fruitgum]

Hallo,

ich habe eine Seitenleiste in der eine Box angelegt wird, in der noch 2 Boxen sind.

<div id="leiste">
<div class="box1">
<h3>About</h3>
<ul id="s_nav">
<li><a href="http://www.meinedomain.de/about">About UniQ</a></li>
<li><a href="http://www.meinedomain.de/about">Contact Sections</a></li>
<li><a href="http://www.meinedomain.de/about">Blog</a></li>
<li><a href="http://www.meinedomain.de/about">Tutorials</a></li>
</ul></div>

<div class="box2">
<h3>Rent or Buy</h3>
<div class="box2_l">
</div>
<div class="box2_r">
</div>
</div>

</div>

also es geht um Box2_l und Box2_r die in Box2 drin sind. Doch leider passt sich Box2 nicht der Größe von BOX2_l und Box2_r an, also l und r gehen nach unten über Box2 hinaus, drüber?

Hier noch das CSS dazu:

.box2 {
background:#fff url(img/box_u_leiste.png) no-repeat bottom left;
width:372px;


}

.box2_l {
float:left;
width:150px;
height:200px;
background:#996600;
}

.box2_r {
float:right;
width:150px;
height:200px;
background:#996600;
}

Liegt irgendwie am Floating, oder?


Grüße

 

[Maik]

Hi,

der Fehler liegt darin, dass du vergessen hast, die Floatumgebung abschliessend wieder zu "clearen" - siehe hierzu meinen Webmaster-FAQ-Artikel CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?.

Die in dem Artikel genannte Klasse clearfix wird in deinem Modell zusätzlich in der Box box2 aufgerufen - also:

<div class="box2 clearfix"> ... </div>

mfg Maik