1. Home
  2. Forums Index
  3. Browser Side / CSS 5:04 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Problem with Footer Not Appearing at Bottom Page

If content to small then footer does not appear at the bottom

         

neveremail

11:17 am on Jul 8, 2006 (gmt 0)

10+ Year Member



I know this is quite a common problme and I Did have a good look around the web for an answer but the ones I tried did not seem to work. Or possibly I was not implementing the correctly. Either way im a bit stuck and was hoping you guys could help out.

Basically I have a very very long left hand menu and need the footer to appear below that, but it only appears below the content area on the right which does not stretch to the bottom of the page.

This is my first complete CSS tabless design so be nice :)

Here is the code: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Title</title>
<style type="text/css" media="all">
HTML{
margin: 0px;
padding: 0px;
}
BODY{
margin: 0; 
padding: 0;
background: #b4b4b4;
}
/***** Header and Main Area *******/ 
#container{
width: 720px;
left: 50%;
background: #7D638A;
margin-left: -352px;
position: relative;
}                             
#pageHeader {
width: 720px;
height: 117px;
margin: 0; 
padding: 0;
background: url(images/header.jpg);
}
#headerspacetop {
height: 7px;
width: 720px;
margin: 0; 
padding: 0;
overflow:hidden;
background: url(images/dot-top.gif) repeat-x;
}
#headerspacebottom {
height: 7px;
width: 720px;
margin: 0; 
padding: 0;
overflow:hidden;
background: url(images/dot-bottom.gif) repeat-x;
}
#headerspace
{
width: 720px;
height: 20px;
overflow:hidden;
margin: 0; 
padding: 0;
background: red;
}
/***** End Header and Main Area *******/ 
/******* Fonts, Text and Links *******/ 
P{
font: 9pt Arial, Verdana, serif;
color: #807A73;
text-align: left;
text-indent: 10px;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;}
a
{
color: #ff0000;
text-decoration: underline;
}
a:visited
{
color: #ff0000;
text-decoration: underline;
}
a:hover
{
color: #ff0000;
background: #C8D5FB;
text-decoration: none;
}
a:active
{
color: #ff0000;
background: #C8D5FB;
text-decoration: none;
}
/******* Enf Fonts, Text and Links ******/ 
/******** Main Content Boxes *******/ 
#mainContent{
width: 535px;
margin: 0px 0px 0px 167px;
padding: 0px 0px 5px 0px;
background: #7D638A;
}
#contenido, #welcomeText, #exTra {
width: 535px;
margin: 5px 5px 25px 7px;
border: solid 3px black;
background: White url(images/main-back-top.jpg) repeat-x top;
}
/* Float Hack For Main Content Blocks to set minimum height for boxes so box will stretch to fit image*/
#clear {
  clear:both;
  height:1px;
  overflow:hidden;
 }
 
.minset {
  height:143px;
 }
 
.floathack
{
float:right;
  width:1px;
 }
/* End Float Hack */
/* The Floating Image */
#contenidoA, #welcomeTextA, #exTraA {
width: 100px;
height: 143px;
float: left;
}
#contenidoA{
background: url(images/main1.gif) no-repeat;}
#exTraA{
background: url(images/main1.gif) no-repeat;}
#welcomeTextA{
background: url(images/main1.gif) no-repeat;}
/* End Floating Image */
/******* End main content boxes ******/ 
/******** Footer ******/
#footer{
width: 720px;
height: 1px;
background: #cfb35b;
height: 36px;
position: absolute;
  left: 0;
background: white;
}
/********* End Footer **********/
/******** Right Menu ********/
#linkList
{
position: absolute;
top: 156px;
left: 3px;
margin: 0px 0px 0px 0px;
width: 164px;
padding-bottom: 13px;
background: #7D638A;
}
#linkList2
{
font-size: 9pt;
color: #BFB8AC;
text-align: center;
}
ul{
list-style-type: none;
padding: 0px 0px 0px 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
float: center;
clear: center;
display: inline-block;
}
#lcategories {
padding: 0px 0px 0px 0px;
background: White url(images/main-back-top.jpg) repeat-x top;
border-left: 4px solid Black;
border-right: 4px solid Black;
border-top: 8px solid Black;
border-bottom: none;
}
#lfoot {
height: 45px;
width: 164px;
background: White;
/***Normally an Image for background ***/
}
#lfoot p
{
text-align: right;
padding-top: 20px;
font-size: 12px;
margin: 0px 5px 0px 0px;
font-weight: normal;
}
#lfoot a
{
font-weight: normal;
}
#lcategoriestop {
margin: 0px 0px 10px 0px;
border-bottom: solid 3px black;
}
#lcategoriestop {
background: url(images/category-image.jpg) no-repeat top;
height: 30px;
}
#linkList a:visited
{
font: 9pt Arial, Verdana, serif;
color: #ff0000;
font-weight: bold;
text-decoration: none;
}
#linkList a
{
font: 9pt Arial, Verdana, serif;
color: #ff0000;
font-weight: bold;
text-decoration: none;
}
#linkList a:active
{
color: #ff0000;
background: #C8D5FB;
}
#linkList a:hover
{
color: #ff0000;
background: #C8D5FB;
}
/******** End Right Menu *******/
</style>
</head>
<body>
<div id="container">
<div id="pageHeader"></div>
<div id="headerspacetop"></div>
<div id="headerspace"></div>
<div id="headerspacebottom"></div>
<div id="linkList">
<div id="linkList2">
<div id="lcategories">
<div id="lcategoriestop">category</div>
<ul>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
<li>Long List</li>
</ul>
 </div>
<div id="lfoot"> <p><a href="/">ADVERT LINK </a></p>
</div><br />
</div></div>
<div id="mainContent">
<div id="contenido"><div class="floathack minset"></div>
 <div id="contenidoA"></h3></div>
<h3>Welcome to Site</h3>
<p class="p1">Some Text</p>
<p class="p1">Some Text</p>
<p class="p1">Some Text</p>
<p class="p1">Some Text <a href="/"></a></p>
<p class="p1">Some Text </p>
<div id="clear"></div>
 </div>
 
 </div>
 <div id="mainContent">
<div id="contenido"><div class="floathack minset"></div>
 <div id="contenidoA"></h3></div>
<h3>Welcome to Site</h3>
<p class="p1">Some Text</p>
<p class="p1">Some Text</p>
<p class="p1">Some Text</p>
<p class="p1">Some Text <a href="/"></a></p>
<div id="clear"></div>
 </div>
 
 </div>
<div id="footer">
 <div align="center">FOOTER</div>
</div>
</div>
</body>
</html>

SuzyUK

12:54 pm on Jul 11, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



absolute positioning of both footer and left column is taking them both out of the flow, so other elements in the page aren't aware of them and they're not aware of each other. as far as I can tell the use of positioning in this layout is perhaps not necessary..

I very quickly changed the left footer to default static position, by removing the positioning, and changed the left column to float left left instead of being positioned.. it seemed to work OK with your existing layout (though I didn't inspect the rest of the code very closely as there is too much ;))

changes:

#footer{
width: 720px;
height: 1px;
background: #cfb35b;
height: 36px;
/*
position: absolute;
left: 0;
*/
background: white;
}

#linkList
{
/*
position: absolute;
top: 156px;
left: 3px;
*/

float: left; /* add this */
margin: 0px 0px 0px 0px; /* use margin here for left positioning if required */
width: 164px;
padding-bottom: 13px;
background: #7D638A;
}

the footer now naturally "clears" the longest column by virtue of it's width!

hope that helps, though remember I didn't stress test

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 5:04 am May 2, 2026