Wer hat Recht, IE oder Firefox

[CarstenP]

Hallo Ingo,

Der Ansatz, den "positioniseverything" beschreibt, gibt dem übergeordneten Container, der auf die Größe seiner floatenden Kinder gestreckt werden soll, per :after ein clear:both
sympatische Lösung wenn da nicht ein bestimmter Browser wäre..;-)

Das hier war nur die Kurzform, um das Prinzip zu beschreiben.... ;-) In dem Artikel selbst wird natürlich ausführlich auf die diversen Probleme eingegangen.

Sobald der Container auch nur eine einzige Größenangabe besitzt, dann gibt's im IE sowieso kein Problem, weil er dann den Container sowieso ausdehnt (deswegen kam es ja überhaupt erst zu Wilhelms "wer hat recht?"-Frage).

Für die restlichen Fälle, gibt man dem IE ein height:1% mit und versteckt diese Angabe vor den anderen Browsern (daran denken: IE interpretiert height in der Regel wie min-height).

Die vollständige positioniseverything-Lösung sieht letzten Endes so aus:

.clearfix:after {  
    content: ".";  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden;  
}  
  
.clearfix {display: inline-table;}  
  
/* Hides from IE-mac \*/  
* html .clearfix {height: 1%;}  
.clearfix {display: block;}  
/* End hide from IE-mac */

.clearfloat {

overflow:auto;
  width:100%; /*oder andere sinnvolle Breitenangaben */
}

> Das funktioniert zwar ebenso wie die unschöne height-Angabe für den IE in dem Beispiel, ist aber untauglich, da es (in zu schmalen Fenstern) zu seiteninternen Scrollbalken führt.  
  
Alles hat eine Kehrseite... ;-)  
  
Man könnte zumindest in modernen Browsern versuchen, den Scrollbalken mit min-height/min-width an geeigneten Stellen entgegenzuwirken.  
  
Viele Grüße  
Carsten  

-- 
[Doctype- Switch? Was is'n das?]( http://www.carsten-protsch.de/zwischennetz/doctype/)