Die 3 Spalten befinden sich bei mir auch in einem gemeinsamen Container, der widerrum nicht "absolut" ist; wenn ich dies aber tue, landet die Fußzeile bei mir oben unter dem Header, der relative zur gesamten Homepage geschaltet ist.
Wenn man das Problem mit der Fußzeile aber ignoriert, werden die 3 Spalten unterhalb immer noch nicht so angezeigt wie gewünscht.
Hier mein ungefährer Code:
CSS:
html { height: 100%; }
* html #page_margins { height:100%; }
/* Der Außenabstand der Homepage: */
#page_margins {
min-width:740px;
max-width:100em;
margin: 0 auto;
height: auto;
min-height:100%;
position:relative;
}
/* Sub-Container: */
#page { padding-bottom: 57px; }
#header { position:relative; width:100%; }
#container { margin:0; padding:0; width:100% }
/* die 3 Spalten: */
#col1 { float: left; width: 200px; } /* links */
#col2 { float:right; width: 200px; } /* rechts */
#col3 { width:auto; margin: 0 200px } /* mitte */
#footer {
position:relative;
min-width: 740px;
max-width: 100em;
margin: -57px auto 0; /* wird von #page_margins abgezogen, damit es am unteren Rand bleibt */
}
#header, #container, #footer { clear:both;}
XHTML:
<div id="page-margins">
<div id="page">
<div id="header">Inhalt</div>
<div id="container">
<div id="col1">Navigation</div>
<div id="col2">Sidebar</div>
<div id="col3">Content</div>
</div>
</page>
</div>
<div id="footer">Fusszeile</div>
PS: Der meiste Code wurde von Yaml übernommen, bis auf die Breiten-/ Höhenangaben etc. (damit das ganze auch in anderen Browsern kompatibel bleibt)
Zaphod
Special-J
xafford
