Hallöchen
ich probiere nun schon ewig rum, folgendes Layout mithilfe von div-Containern zu realisieren. Mein Ziel ist es, einen Banner mit fixer Höhe und 100% Breite über einem weiteren div-Container zu erhalten. Dieser weitere div-Container soll wiederum vier weitere Elemente beherbergen, die sich in der Höhe dem umfassenden div-Container anpassen sollen.
In etwa wie:
------------------------
####Banner#####
links/---Total----/rechts
-----/------------/-----
-----/------------/-----
-----/------------/-----
-----/------------/-----
-----/------------/-----
-----/#footer#-/-----
------------------------
Also der Banner sollte sich übers gesamte Browserfenster erstrecken. Der linke div-Container sollte "automatisch" die Höhe des übergeordneten Containers aufweise, so wie der rechte div-Container. Der Total-Container sollte schliesslich den Inhalt beherbergen.
Der footer-Container soll unterhalb des Inhalt-Containers zu liegen kommen und dieselbe Breite wie der Inhalts-Container aufweisen.
Ich probierte grundsätzlich in etwa wie folgt:
....
<body>
<div id="banner>
</div>
<div id="total">
<div id="links">
</div>
<div id="inhalt">
<div id="footer">
</div>
</div>
<div id="rechts">
</div>
</div>
....
Das stylesheet beherbergt nun folgende Definitionen:
body {margin: 0%;
padding: 0%;
border: 0px;
}
#total {position: absolute;
top: 110px;
left: 0px;
height: auto;
width: 100%;
margin: 0%;
padding: 0%;
}
#banner {position: absolute;
top: 0px;
left: 0px;
height: 110px;
width: 100%;
margin: 0%;
padding: 0%;
}
#links {position: absolute;
top: 0px;
left: 0px;
width: 10%;
height: inherit;
margin: 0%;
padding: 0%;
background-color: blue;
}
#rechts {position: absolute;
top: 0px;
right: 0px;
width: 10%;
height: inherit;
margin: 0%;
padding: 0%;
background-color: blue;
}
#footer {position: absolute;
bottom: 50px;
left: 0%;
width: 100%;
height: 50px;
margin: 0%;
padding: 0%;
background-color: blue;
}
#inhalt {position: absolute;
top: 0px;
left: 10%;
width: 80%;
height: auto;
margin: 0%;
padding: 0%;
}
Das Problem ist nun, dass die Höhe der div-Blöcke links und rechts mit den Eigenschaften inherit lediglich die Eigenschaft auto erben, nicht aber die tatsächliche Höhe des Elternelementes annehmen...
Ich weiss nicht, was ich noch probieren könnte.... mit relativen Positions-Angaben kommts in etwa gleich raus...
Weiss jemand Rat?..
Grüsse
fidelio