✔ div-Layout Box gleich hoch - .clearfix

dwex

dwex

Erfahrenes Mitglied
Hallo Leute,

ich habe immer noch ein mächtiges Verständnissproblem was die automatische Anpassung der Höhe von DIV-Boxen angeht.

Also ich habe folgenden Quelltext (mal stark vereinfacht):
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2 Column CSS Layout - concise design</title>
<style type='text/css'>
.wrapper{
   margin: 0px auto;
   width: 858px;
   background-color: #cccccc
}
.header{
   float: left;
   width: 100%;
   height: 120px;
   background-color: #ffff88
}
.left{
   float: left;
   width: 200px;
   background-color: #fc0234
}
.right{
   float: right;
   width: 658px;
   background-color: #4096ee;
}
.footer{
   float: left;
   width: 100%;
   background-color: #cfcfcf
}
body {
   padding: 0px;
   margin: 0px;
   font-size: 90%;
   background-color: #e7e7de
}
.content {
	padding: 10px;
}
.navigation {
	padding: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
    <div class="header">
        header
    </div>
        <div class="left">
            <div class="navigation">
            Hier kommt die Navigation hinein
            </div>
        </div>
        <div class="right">
            <div class="content">
            Hier kommt der Content hinein
            </div>
        </div>
    <div class="footer">
        footer
    </div>
</div>
</body>
</html>
Mir gehts jetzt um die Box "left" und "right" ich nun verschieden hohen Inhalt in den Boxen habe ist entweder die eine oder die andere länger und es kommt der "Haupthintergrund" durch.
Jetzt möchte ich aber das die Boxen in abhängigkeit der jeweils anderen auch größer werden.
Dazu habe ich folgendes gemacht:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2 Column CSS Layout - concise design</title>
<style type='text/css'>
.wrapper{
   margin: 0px auto;
   width: 858px;
   background-color: #cccccc
}
.header{
   float: left;
   width: 100%;
   height: 120px;
   background-color: #ffff88
}
.left{
   float: left;
   width: 200px;
   background-color: #fc0234
}
.right{
   float: right;
   width: 658px;
   background-color: #4096ee;
}
.footer{
   float: left;
   width: 100%;
   background-color: #cfcfcf
}
body {
   padding: 0px;
   margin: 0px;
   font-size: 90%;
   background-color: #e7e7de
}
.content {
	padding: 10px;
}
.navigation {
	padding: 10px;
}

.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 */

/*  body und schrift definitionen */
</style>
</head>
<body>
<div class="wrapper">
    <div class="header">
        header
    </div>
    <div class="clearfix">
        <div class="left">
            <div class="navigation">
            Hier kommt die Navigation hinein
            </div>
        </div>
        <div class="right">
            <div class="content">
            Hier kommt der Content hinein
            </div>
        </div>
    </div>
    <div class="footer">
        footer
    </div>
</div>
</body>
</html>
Nur leider funktioniert das nicht.
Wo habe ich hier meinen Denkfehler?
Vielen Dank für eure Hilfe!
 
Hi,

mit den Regeln der ".clearfix"-Klasse lassen sich die Spaltenhöhen nicht automatisch angleichen. Sie dient lediglich dazu, das Floaten zu beenden, und wieder den normalen Textfluß im Dokument herzustellen.

In dem Artikel AnyColumnLongest findest du hierfür diverse technische Lösungsansätze.

mfg Maik
 
Hallo Maik,

danke für den Hinweis - aber in der Vergangenheit habe ich es bei zwei Layouts auch ohne Hintergrundbild geschaft - ich dachte es lag dan dem Clearfix denn wenn ich bei den "alten" Layouts das Clearfix "ausschalte" dann habe ich das Problem.
 
Moin,

das dies technisch nur mit einem Hintergrundbild möglich wäre, hab ich mit keiner Silbe erwähnt, und in meiner Linkempfehlung finden sich ebenso grafiklose Lösungsansätze, wie z.B. Equal Height Columns - revisited.

Wenn dir in der Vergangenheit das automatische Angleichen der Spaltenhöhen mit der ".clearfix"-Klasse gelungen ist, dürfte es sich hierbei aber wohl um eine (im Detail) andere "HTML-/CSS-Konstruktion" handeln, wie im obigen Beispiel.

Hast du die Links oder den relevanten HTML-/CSS-Codeauszug dieser Seiten zur Hand?

Nur zur Erinnerung, wofür diese CSS-Klasse in der Praxis grundsätzlich zum Einsatz kommt: How To Clear Floats Without Structural Markup.

mfg Maik
 
Servus Maik,

vielen Dank für den Hinweis - ich werde mein Englisch jetzt ein bischen mit der Beschreibung aufbessern ;)

Den Quellcode habe ich momentan nicht "zur Hand".
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück