1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

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

Dieses Thema im Forum "Webmaster FAQ" wurde erstellt von Maik, 19. April 2008.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Maik

    Maik Gast

    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:

    Code (Text):
    1.  
    2. <div id="wrapper">
    3.    <div id="content">
    4.       <div id="leftColumn">
    5.            <p>leftColumn_content</p>
    6.            <p>leftColumn_content</p>
    7.            <p>leftColumn_content</p>
    8.            <p>leftColumn_content</p>
    9.            <p>leftColumn_content</p>
    10.            <p>leftColumn_content</p>
    11.            <p>leftColumn_content</p>
    12.            <p>leftColumn_content</p>
    13.            <p>leftColumn_content</p>
    14.            <p>leftColumn_content</p>
    15.            <p>leftColumn_content</p>
    16.            <p>leftColumn_content</p>
    17.            <p>leftColumn_content</p>
    18.            <p>leftColumn_content</p>
    19.            <p>leftColumn_content</p>
    20.       </div>
    21.       <div id="rightColumn">
    22.            <p>rightColumn_content</p>
    23.            <p>rightColumn_content</p>
    24.            <p>rightColumn_content</p>
    25.            <p>rightColumn_content</p>
    26.            <p>rightColumn_content</p>
    27.            <p>rightColumn_content</p>
    28.            <p>rightColumn_content</p>
    29.            <p>rightColumn_content</p>
    30.            <p>rightColumn_content</p>
    31.            <p>rightColumn_content</p>
    32.            <p>rightColumn_content</p>
    33.            <p>rightColumn_content</p>
    34.            <p>rightColumn_content</p>
    35.       </div>
    36.    </div>
    37. </div>
    38.  
    Stylesheet:

    Code (Text):
    1.  
    2. #wrapper {
    3. width:500px;
    4. margin:0 auto;
    5. }
    6.  
    7. #content {
    8. background:#f8f8ff;
    9. border:1px solid #000;
    10. min-height:200px;
    11. height:auto !important;
    12. height:200px;
    13. }
    14.  
    15. #leftColumn {
    16. float:left;
    17. width:245px;
    18. }
    19.  
    20. #rightColumn {
    21. float:right;
    22. width:245px;
    23. }
    24.  
    25. #leftColumn p, #rightColumn p {
    26. margin:0;
    27. padding:0 10px;
    28. }
    29.  
    Das Ergebnis in den Browsern:

    float-container_modern-browser.jpg (Standardkonforme Browser: Firefox, Netscape, Opera, Safari, usw.)

    float-container_ie.jpg (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.

    Code (Text):
    1.  
    2. .clearfix:after {
    3. content:".";
    4. display:block;
    5. height:0;
    6. font-size:0;
    7. clear:both;
    8. visibility:hidden;
    9. }
    10.  
    11. .clearfix {display:inline-block;}
    12.  
    13. /* Hides from IE-mac \*/
    14. * html .clearfix {height:1%;}
    15. .clearfix {display:block;}
    16. /* End hide from IE-mac */
    17.  
    Die Klasse .clearfix wird in meinem vorgestellten HTML-Code im DIV #content aufgerufen, das die fließenden Spaltenblöcke unmittelbar umschließt:

    Code (Text):
    1.  
    2. <div id="wrapper">
    3.    <div id="content" [b]class="clearfix"[/b]>
    4.       <div id="leftColumn">
    5.            <p>leftColumn_content</p>
    6.            <p>leftColumn_content</p>
    7.            <p>leftColumn_content</p>
    8.            <p>leftColumn_content</p>
    9.            <p>leftColumn_content</p>
    10.            <p>leftColumn_content</p>
    11.            <p>leftColumn_content</p>
    12.            <p>leftColumn_content</p>
    13.            <p>leftColumn_content</p>
    14.            <p>leftColumn_content</p>
    15.            <p>leftColumn_content</p>
    16.            <p>leftColumn_content</p>
    17.            <p>leftColumn_content</p>
    18.            <p>leftColumn_content</p>
    19.            <p>leftColumn_content</p>
    20.       </div>
    21.       <div id="rightColumn">
    22.            <p>rightColumn_content</p>
    23.            <p>rightColumn_content</p>
    24.            <p>rightColumn_content</p>
    25.            <p>rightColumn_content</p>
    26.            <p>rightColumn_content</p>
    27.            <p>rightColumn_content</p>
    28.            <p>rightColumn_content</p>
    29.            <p>rightColumn_content</p>
    30.            <p>rightColumn_content</p>
    31.            <p>rightColumn_content</p>
    32.            <p>rightColumn_content</p>
    33.            <p>rightColumn_content</p>
    34.            <p>rightColumn_content</p>
    35.       </div>
    36.    </div>
    37. </div>
    38.  

    mfg Maik
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen