CSS keeping the footer at the bottom

: Joel Lipman; Cascading Stylesheets; 25 April 2011; Hits: 11947

Spent enough time trying different methods across the web but only 1 article worked for me using the "push" div layer. Loosely based on Ryanfait: Make a Footer Stick to the Bottom of the Page

Aim:

Header
Left	Right
Footer

copy raw

<div id="container">
     <div id="header"></div>
     <div id="content">
          <div id="left"></div>
          <div id="right"></div>
          <div class="push"></div>
     </div>
     <div id="footer"></div>
</div>

<div id="container">
<div id="header"></div>
<div id="content">
<div id="left"></div>
<div id="right"></div>
<div class="push"></div>
</div>
<div id="footer"></div>
</div>

Situation
The header displayed fine. The left and right columns finally got them side by side. But the footer that has a background image was under the left and right columns... The main content layer was overlapping the footer. I tried various z-index's bearing in mind that the footer has to be behind because the main content had a semi-transparent layer that overlapped it half-way.

I managed to fix this by including a div push layer which clears both (even though i had clear:both on the css for my #right div layer). For some reason, it has a more forceful effect in its own separate layer.

In a joomla CMS template though, I wanted the "left" div to take over the whole page if there were no modules positioned in the "right" div. I specified width of left using PHP. This is the CSS though:

copy raw

#container {
	position: relative;
}
#content {
	position: relative;
	top: 0;
	width: 900px; 
	margin: 0 auto;
	min-height: 500px; /* to stop footer coming up on empty pages */
	background-image: url("../images/bg_contentbox.png"); /* semi transparent background */
}
#footer {
	position: relative;
	bottom:0;
	margin:0;
	padding:0;
	width:100%;
	height: 250px; /* height of my footer */
	background-color: #8cc553;
	z-index: -1;
}
#left {
	float: left;
        width:500px;
	margin: 0;
	padding: 0;
}
.push {
	clear:both;
}
#right {
	float:left;
	width:380px;
	margin: 0 0 0 20px;
	padding: 0;
}

#container {
position: relative;
}
#content {
position: relative;
top: 0;
width: 900px;
margin: 0 auto;
min-height: 500px; /* to stop footer coming up on empty pages */
background-image: url("../images/bg_contentbox.png"); /* semi transparent background */
}
#footer {
position: relative;
bottom:0;
margin:0;
padding:0;
width:100%;
height: 250px; /* height of my footer */
background-color: #8cc553;
z-index: -1;
}
#left {
float: left;
width:500px;
margin: 0;
padding: 0;
}
.push {
clear:both;
}
#right {
float:left;
width:380px;
margin: 0 0 0 20px;
padding: 0;
}

Category: Cascading Stylesheets :: Article: 350

CSS keeping the footer at the bottom

Credit where Credit is Due:

Related Articles

Joes Revolver Map

Joes Word Cloud

Accreditation

Donate & Support