Divs rutschen im IE untereinander

[Julian]

Hallo allesamt,

Auf die Gefahr hin ausgeschimpft zu werden weil ich nicht mit google, der Selfhtml-Suche o.Ä. draufgekommen bin stelle ich die Frage jetzt doch im Forum. Vielleicht kann ich mir dadurch weitere 3 Stunden Suche ersparen.

Ich habe ein zweispaltiges Layout mit divs.

  
      #div1 { float : left;  
                  width : 200px;  
                  height : 500px;  
                  background-image : url(test.jpg);  
                  background-repeat : no-repeat;  
                  display : inline;  
            }  
      #content { margin-top : 20px;  
                 margin-left : 20px;  
                 background-color : white;  
               }  

Diese Divs rutschen im IE(6) wie in folgendem Screenshot zu sehen untereinander:

Wenn ich der zweiten div einen Wert für die Höhe gebe (z.B. 300px) dann wird sie richtig dargestellt, d.h. _neben_ der Anderen. Da in diese Div aber dynamischer Text reinkommt möchte ich eigentlich auf eine Höhenangabe verzichten. Auch die Angabe height : auto; funktioniert nicht.

mfg Julian

[wahsaga]

hi,

#div1 { float : left;
                  display : inline;

Wozu display:inline?

display kann gar nicht inline sein, wenn float nicht none ist - http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

Wenn ich der zweiten div einen Wert für die Höhe gebe (z.B. 300px) dann wird sie richtig dargestellt, d.h. _neben_ der Anderen.

Könnte mal wieder ein hasLayout-Effekt sein.

Da in diese Div aber dynamischer Text reinkommt möchte ich eigentlich auf eine Höhenangabe verzichten.

Kannst du aber eigentlich machen - wenn du die Angabe nur für den IE machst (Conditional Comments) - der behandelt height nämlich wie min-height.
height:1% oder height:1px wird oft genutzt, um im IE für ein Element hasLayout zu triggern.
Gewisse andere Eigenschaften triggern es aber auch - bspw. zoom:1.

gruß,
wahsaga

[Julian]

Danke erstmal für die Schnellen Antworten.

Wozu display:inline?

gute Frage :)
Ich habe beim googeln irgendeinen Bug vom IE gefunden den man scheinbar mit display:inline beheben kann. Vor lauter Verzweiflung habe ich es einfach mal versucht, es hat natürlich nicht wie erhofft funktioniert aber daher das disply:inline.

Kannst du aber eigentlich machen - wenn du die Angabe nur für den IE machst (Conditional Comments) - der behandelt height nämlich wie min-height.
height:1% oder height:1px wird oft genutzt, um im IE für ein Element hasLayout zu triggern.

Funktioniert perfekt, danke!

mfg Julian

[MudGuard]

Hi,

#content { margin-top : 20px;

Diese Divs rutschen im IE(6) wie in folgendem Screenshot zu sehen untereinander:

Also genau 20px nach unten versetzt.

Ich rate *) mal: das könnte mal wieder so ein Fall sein, wo der IE zu blöd ist, collapsing margins richtig darzustellen, da der Versatz genau dem gegebenen margin-top entspricht.

*) Das Fehlen eines Links auf die Testseite erschwert natürlich klare Aussagen, da über die Struktur des HTML nichts bekannt ist und auch nicht, ob ggf. noch weiteres CSS für andere Elemente mit reinspielt.

cu,
Andreas