Hi,
ich habe ein sehr lästiges Problem mit der Ausrichtung von einem div-Container.
Und zwar soll dieser genau so hoch sein, wie ein anderen Container.
Insgesamt handelt es sich dabei um 3 Container, wobei die zwei, um die es eigentlich geht, von einem weiteren eingeschlossen sind:
<div id="main">
<div id="sidebar">
</div>
<div id="text">
Lorem ipsum dolor sit amet consecetur....
</div>
</div>
Alles anzeigen
Dabei soll "sidebar" genau so hoch sein, wie "text". "text" hat eine Höhe "auto", also exakt so viel, wie der Text einimmt, bzw. eine Mindesthöhe (min-height) von 777px.
"Main" hat ebenfalls eine Höhe von "auto".
Leider ist die sidebar, egal ob ich ihr nun eine Höhe von 100% oder "auto" zuweise, immer nur so hoch, wie der sich in ihr befindende Content einnimmt. Wie kann ich es erreichen, dass die Sidebar immer genau so hoch ist, wie der Container "Text"?
Das CSS für die drei Container sieht folgendermaßen aus:
div#main {
width : 810px;
height : auto;
margin-left : 20px;
margin-top : 15px;
color : #5d5d5d;
font-size : 1em;
}
div#sidebar {
width : 240px;
height : 100%;
float : right;
border-left : 1px solid #ffffff;
background : #000000 url(style/sidebar.jpg) no-repeat;
background-position : bottom;
font-size : 1em;
color : #5d5d5d;
}
div#text {
width : 540px;
height : 100%;
min-height : 777px;
overflow : auto;
scrollbar-face-color : #000000;
font-size : 1em;
color : #5d5d5d;
}
Alles anzeigen
Beispiel s. hier
Vielen Dank für eure Hilfe!
MfG Alienx