Clearfix bei mehreren floatenden divs | Höhenabstandproblem

[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