Dealing with this is absolutely driving me insane... While constructing the page over at , I've encountered a rather perplexing issue. The layout consists of a header, left menu, content, and footer within a fixed width of 960px, all centered horizontally which functions as intended. However, when there is minimal text in the content section, I desire for the gray content area to always occupy the available screen height, thereby pushing the footer downwards.
The structure of the page resembles the following:
<body>
<!-- Centralized container housing the site -->
<div id="centeredcontainer">
<!-- Header area -->
<div id="header">
Insert header here
</div>
<!-- Main menu on left-hand side, content on right-hand side -->
<div id="mainmenuandcontent">
<!-- Left-hand main menu -->
<div id="mainmenu">
Main menu content
</div>
<!-- Content on the right-hand side -->
<div id="content">
Body content goes here
</div>
<!-- Clears floats to allow normal margins for subsequent elements -->
<div class="clearer"></div>
<!-- Red line beneath content -->
<div id="RedLineUnderContent"></div>
</div>
<!-- Footer area with language options -->
<div id="languages">
Add footer information here
</div>
</div>
</body>
Below you'll find the relevant CSS:
body
{
font-size: 12px;
font-family:Century Gothic,Helvetica,Verdana,Arial,sans-serif;
line-height:1.5em;
margin: 0;
padding: 0;
background-color: Black;
}
#centeredcontainer
{
width: 960px;
margin-left: auto ;
margin-right: auto ;
}
#header
{
margin-bottom: 20px;
margin-top:20px;
}
#mainmenuandcontent
{
width: 960px;
clear: both;
position: relative;
}
#mainmenu
{
float: left;
width:180px;
padding:10px;
}
#content
{
float: left;
background-color: #403F3F;
width: 760px;
min-height: 400px;
color:White;
}
#RedLineUnderContent
{
height: 20px;
background: #A10C10;
margin-left: 200px;
}
#languages
{
margin-top: 10px;
margin-left: 200px;
margin-bottom:20px;
text-transform:uppercase;
}
.clearer
{
clear:both;
}