View Full Version : CSS footer positioning problem

02-10-2012, 09:30 AM
I have a series of DIV's
banner Full width
menu Left side 1/3 width
content Right 2/3 varable height
footer suppost to be full with below menu and content

I am having a problem getting the footer to line up at the bottom of the page full width of my outer div.

Any help would be appreciated.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Welcome </title>

<link href="css/mycss.css" rel="stylesheet" type="text/css" />



<div id="outerDiv">

<div id="header" >
<h1 style="margin-bottom:0;"></h1>

</div> <!-- End Header Div -->

<div id="mainMenu">
<li> <a class="blue" href="home.html"><em>Home</em></a></li>
<li> <a class="blue" href="service.html"><em>Inspection Service</em></a></li>
<li> <a class="blue" href="pricing.html"><em>Pricing</em></a></li>
<li> <a class="blue" href="reports.html"><em>Report Content</em></a></li>
<li> <a class="blue" href="about.html"><em>About Us</em></a></li>
<li> <a class="blue" href="contact.html"><em>Contact Us</em></a></li>
<li> <a class="blue" href="faq.html"><em>FAQs and Links</em></a></li>

<p align="center"><img src="images/logo1.jpg" alt="" height="130" Width="140"></p>
<br />

<p align="center"><img src="images/logo4.gif" alt=" " height="140" width="140"></p>
</div> <!-- End mainMenu Div -->

<div id="mainContent">
<h2 align="center">Content</h2>
<p align=center><img src="Images/building.jpg" alt="" height="150" width="150" /></p><br/>
<p>More Content</p>

<p>More Content</p>

</div> <!-- End mainContent Div -->
<div id="footerDiv">

<h6>This is the area for the footer to go</h6>
</div> <!-- End of Footer Div -->
</div> <!-- End Outer Div -->


body {
font-family: Georgia, serif;
background: #bbb url(../images/bg.jpg);
margin: 0;
Padding: 0;


p, h1, h2, h3, h4, h5, h6, li {
margin: 1ex 1em;

div#base {

width: 800px;
margin:o auto;


div#outerDiv {
width: 796px;
margin:0 auto;


div#header {
height: 180px;
background: url(../images/BannerWhite3.png) no-repeat;


div#mainMenu {

background: url(../images/sidebarWhite.png) ;
float: left;
width: 175px;

margin: 0;
padding: 0;


#mainMenu li {
width: 300px;
height: 26px;
float: left;
border: 0px solid #000;
margin-right: 2px;
list-style-type: none;
text-indent: 0em;

#mainMenu a em {
font-style: normal;
font-size: 1em;
line-height: 1.5em;

#mainMenu a {
text-decoration: none;
color: #000;
position: relative;

width: 140px;
height: 22px;
display: block;
text-align: center;

#mainMenu a.blue {background: #00c; color: #fff;}

#mainMenu a:hover {
width: 170px;
height: 28px;
z-index: 200;
background: #aaa;
#mainMenu a:hover em {
font-size: 1.5em;
color: #000;
line-height: 1.1em;
overflow: hidden;
cursor: pointer;
background: #f93;
border: 1px solid #f93;
position: absolute;
width: 170px;
height: 25px;
left: -12px;
top: -8px;

#mainMenu a:hover.blue em {background: #0000cc:}

div#mainContent {
background: url(../images/sidebarWhite.png) ;

float: left;
padding: 10px 10px;

div#aboutContent {
background: url(../images/sidebarWhite.png);

float: left;
padding: 10px 10px;
#aboutContent li{
font-size: .75em;

div#footerDiv {
position: absolute;
float: bottom;
width: 796px;

margin: 15px;

#footerDiv h6 {
color: #3333cc;


02-10-2012, 09:46 AM
I'd recommend you to check http://bonrouge.com/2c-hf-fixed.php

02-10-2012, 05:22 PM
Thank you for the link looks like what I have been looking for.