Hallo,
ich erstelle gerade eine site mit einem zweispaltigen CSS-Layout.
--- CSS ---
#container { width: 970px; margin-bottom: 0; margin-left: auto; margin-right: auto; background-color: #fffcd6; background-image: url(../images/background_links.gif); background-repeat: repeat-y; min-height: 780px; max-height: 780px;}
#left { position: relative; float: left; width: 260px; margin: 0; padding: 40px 0 0; max-height: 100%; border: solid 1px black; }
#banner { background-color: #fffcd6; height: 180px; padding: 0; margin-left: 261px; margin-right: 0; }
#content { background-color: #fffcd6; width: 645px; padding: 20px 25px 10px 35px; margin-left: 262px; margin-right: 0; min-height:450px; max-height:450px; margin-top: 0; border: solid 1px black;}
#footer { background-image: url(../images/welle_ostsee.gif); width: 970px; height: 120px; vertical-align:bottom ; }
body {margin-top: 0px; font-size: 12px; font-family: arial; line-height: 14px;}
--- HTML ----
<div id="container">
<div id="left">
</div>
<div id="banner">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
Das funktioniert im IE und FF auch genau so wie es soll. Ich möchte aber, dass der content-Container scrollt, sofern nötig. Dazu trage ich "overflow: auto" ein. Im IE ist immer noch alles prima, aber im Firefox ruscht der content-Container jetzt unter den left-Container. Es blebt quasi eine Lücke zwischen banner-Container und content-Container.
Kann mir jemdan einen Tipp geben, wie ich das ganze im Firefox hinbekomme?