Clearfix bei mehreren floatenden divs | Höhenabstandproblem

[Jörn Akkermann]

Hallo,

ich habe auf meiner Seite folgende Situation:

Links ein Navigations-div mit Hyperlinks, float: left;
rechts daneben einen main-content-div mit dem eigentlichen Inhalt der Seite;
in dem main-content div kommen manchmal zwei divs mit float: left und float: right vor (im Linken der Titel, im Rechten Buttons von Elementen einer Liste);
darunter ein Clearfix.

Jetzt ergibt sich das folgende Problem:
Der Abstand zwischen dem Clearfix und den beiden Float-Divs der Listenelemente ist so groß, dass der Inhalt nach dem Clearfix da beginnt wo das Navigations-div ganz links höhenmäßig aufhört.

Screenshot mit Kommentaren

Ohne das Clearfix gibt es das Problem nicht.

Code meines Clearfixes (allerdings entsteht das Problem bereits wenn das Clearfix lediglich aus clear: both; besteht):
.clearer:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

* + html .clearer {
    display: inline-block;
}

* html .clearer {
height: 1%;
}

Ich hoffe Sie können mir helfen!

Vielen Dank
und mit freundlichen Grüßen,
Jörn Akkermann.

[Detlef G.]

Hallo Jörn

Jetzt ergibt sich das folgende Problem:
Der Abstand zwischen dem Clearfix und den beiden Float-Divs der Listenelemente ist so groß, dass der Inhalt nach dem Clearfix da beginnt wo das Navigations-div ganz links höhenmäßig aufhört.

Woher soll der Browser auch wissen, dass du nur die Floats im main-content-div clearen willst und das Float der Navigation nicht.

Zur möglichen Lösung deines Problems lies mal float-Umgebungen verschachteln.

Auf Wiederlesen
Detlef

[Jörn Akkermann]

Hallo Detlef,

vielen Dank für deine Antwort.

Wenn ich das richtig verstehe, macht die Lösung im Link allerdings genau das, was unterlassen werden soll.

Die Höhe soll ja eben nicht an das andere floatende Element angepasst werden.

Hast du noch eine Idee?

Leider ist es recht schwierig aus dem Quellcode die Lösung herauszufriemeln.

Meine eine Klasse heißt "put_left" und die andere "put_right".

Immer so aufgebaut:

<div id="left">
 <ul class="menu>
   <li>Linkeintrag</li>
 </ul>
</div>
<div id="content">
 <div class="list_element">
   <div class="put_left">
     <b>&Uuml;berschrift</b>
   </div>
   <div class="put_right">
     Context-Links
   </div>
   <div class="clearfix"></div>
   <p>Summary</p>
 </div>
</div>

Kannst du mir bitte in diesem Kontext sagen was ich genau machen muss? Ich hab's anhand deines Links leider nicht geschafft...

Vielen Dank,
Jörn Akkermann.

[Detlef G.]

Hallo Jörn

Wenn ich das richtig verstehe, macht die Lösung im Link allerdings genau das, was unterlassen werden soll.

Hast du dir nur die Beispiele angesehen oder gelesen _und_ verstanden, was Block Formatting Contexts (bzw. hasLayout bei IE<7) bewirkt?

Die Höhe soll ja eben nicht an das andere floatende Element angepasst werden.

Genau!
Wenn du clear verwendest, bezieht sich dieses auf alle vorhergehenden Floats, es sei denn du trennst sie durch ein Element mit Block Formatting Context ab.

Hast du noch eine Idee?

Nicht noch eine, sondern genau dieselbe.

Leider ist es recht schwierig aus dem Quellcode die Lösung herauszufriemeln.

Wieso aus dem Quellcode herausfriemeln? Da steht doch alles:
„Der kommende CSS-Standard Version 2.1 definiert, dass clear nicht immer global wirkt, sondern nur auf alle float-Boxen im gegenwärtigen Block Formatting Context.”

Meine eine Klasse heißt "put_left" und die andere "put_right".

Das halte ich nicht für gut. Wenn du einmal ein anderes Layout willst, dann musst du das wieder ändern, sonst bezeichnet „put_left” plötzlich das rechte und „put_right” das linke Element.
Wähle Klassen und IDs immer nach ihrem Inhalt, nie nach ihrem momentan gewünschten Aussehen.

<div id="left">
<ul class="menu>
   <li>Linkeintrag</li>
</ul>
</div>

Braucht das ein extra Div drumherum? Warum gibst du der ul.menu nicht gleich die nötigen Eigenschaften?
Irgendwie ist es auch unlogisch irgendein Div bekommt eine ID „left” ,als ob das das einzige Element wäre, das eventuell links stehen soll (außerdem gilt oben bereits geschriebenes), und _das_ Menü bekommt die Klasse „menu”, als ob es viele identische Menüs auf der Seite gäbe.

<div id="content">
<div class="list_element">
   <div class="put_left">
     <b>&Uuml;berschrift</b>

Soll das eine Überschrift sein?
Wieso dann ein „b”, dafür gibt es doch „h1”, „h2”, „h3”….

</div>
   <div class="put_right">
     Context-Links
   </div>
   <div class="clearfix"></div>

Warum extra ein Div zum clearen?
Du kannst doch einfach dem folgenden Element ein clear spendieren.

<p>Summary</p>

<p class="summary">Summary</p>

.summary {  
  clear:both;  
}  

</div>
</div>

Kannst du mir bitte in diesem Kontext sagen was ich genau machen muss? Ich hab's anhand deines Links leider nicht geschafft...

Versuch es doch einfach mit:

#content {  
	overflow:hidden;  
}  
/* und für alte IEs */  
* html #content {  
	zoom:1;  
}  

Auf Wiederlesen
Detlef

[Jörn Akkermann]

Super! Das war's!

Vielen lieben Dank!

overflow: hidden; in den Content.