[CSS] Warum passt sich die Boxenhöhe nicht dem Inhalt an?

[Maik]

Warum passt sich die Boxenhöhe nicht dem Inhalt an?
oder
Warum umschliesst die Box ihren Inhalt nicht in der vollen Höhe?
oder
Warum vergrössert sich die Boxenhöhe bei zunehmenden Inhalt nicht?

Die Ausgangssituation: In einem CSS-Layout kommen floatende Spaltenblöcke zum Einsatz.

Markup:

<div id="wrapper">
   <div id="content">
      <div id="leftColumn">
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
      </div>
      <div id="rightColumn">
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
      </div>
   </div>
</div>

Stylesheet:

#wrapper {
width:500px;
margin:0 auto;
}

#content {
background:#f8f8ff;
border:1px solid #000;
min-height:200px;
height:auto !important;
height:200px;
}

#leftColumn {
float:left;
width:245px;
}

#rightColumn {
float:right;
width:245px;
}

#leftColumn p, #rightColumn p {
margin:0;
padding:0 10px;
}

Das Ergebnis in den Browsern:

(Standardkonforme Browser: Firefox, Netscape, Opera, Safari, usw.)

(IE)

Lösung:

Die Floatumgebung muss mit Hilfe der clear-Eigenschaft aufgehoben, und so im Dokument wieder der normale Textfluss hergestellt werden, damit die Box ihren Inhalt in der vollständigen Höhe umschliesst, und nicht von ihm am unteren Elementrand "überlappt" wird.

.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

Die Klasse .clearfix wird in meinem vorgestellten HTML-Code im DIV #content aufgerufen, das die fließenden Spaltenblöcke unmittelbar umschließt:

<div id="wrapper">
   <div id="content" class="clearfix">
      <div id="leftColumn">
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
           <p>leftColumn_content</p>
      </div>
      <div id="rightColumn">
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
           <p>rightColumn_content</p>
      </div>
   </div>
</div>

• Quelle: How To Clear Floats Without Structural Markup

mfg Maik