Fill parent container
- by manix
After several hours of design battle I come to you for a hand. I am building a website for a night club as you can see.
I can't get stretch the centered area (bordered by yellow color) to the bottom of the page where the footer start (the footer is the green top-bordered div). This happends because the content is not enought to fill the rest of heigh.
This is my css
html, body{
height: 100%;
margin: 0 auto;
}
#container{
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* as #footer height */
min-height: 100%;
text-align: center;
border: 5px solid blue;
}
#centered-container{
width: 950px;
margin: 0 auto;
text-align: left;
border: 5px solid yellow;
}
#body-container{
border: 5px solid red;
}
#footer, .footer{
height: 50px;
}
#footer{
text-align: center;
border-top: 5px solid green;
}
And this is my html markup
<body>
<div id="container"> <!-- BLUE BORDER -->
<div id="centered-container"> <!-- YELLOW BORDER -->
<div id="body-container"> <!-- RED BORDER -->
</div>
</div>
<div class="footer"></div> <!-- GREEN BORDER -->
</div>
<div id="footer"></div>
</body>
Expected behaviour:
Additional facts
- The colored borders is just for debugging porpuses
