Problem mit float

[Axel Richter]

Hallo,

Hallo. Ich habe als Konzept eine einfache Seite mit ein paar <div>'s und einem CSS erstellt, welche unter http://image.lodsoft.de/temp/test.htm temporär verfügbar ist.

(Es folgt Wortgulasch, um die Sache abzukürzen.) Das Problem spielt sich im div#menu ab, welcher ein links gefloatetes img#sitelogo sowie weitere nichtgefloatete <div>'s enthält. Das umschließende div#menu hat eine 1 Pixel breite border-bottom, welche unter allen Kindelementen, insbesondere dem img, stehen sollte. In IE 7 funktioniert das auch tadellos, in den standardkonformen Browsern (hier Op 9 und FF 2) allerdings nicht.

Ich hatte schon versucht, als letztes Kindelement des div#menu ein div#menuend mit { clear:both; } einzufügen.

Das muss aber den gewünschten Effekt haben.

wie ich das Verhalten des IE auch in den standardkonformen Browsern erreiche.

Mit der Wunderwaffe overflow, sprich mit

  
...  
                        div#menu {  
                                border-bottom: 1px solid #AAA;  
                                padding: 0.5em;  
                                background-color: white;  
                                width: 100%;  
                                z-index: 1;  
                                overflow: auto;  
                        }  
...  

Wozu hast Du eigentlich das width:100% hier? Das muss raus! In den standardkonformen Browsern ergibt das (100% + 2 x padding von 0.5em) mehr als die Viewportbreite. Für den IE (siehe [link:http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#internet-explorer und dort hasLayout) reicht ein zoom: 1; oder ein height: 1px _ohne_ overflow:auto; in einem Conditional Comment.

Ein overflow:hidden würde auch gehen. Das div#menu darf natürlich keine fix vorgegebenen Maße bekommen, damit die entspechenden anderen Konsequenzen von overflow nicht wirksam werden müssen.

viele Grüße

Axel