1. Home
  2. Forums Index
  3. Browser Side / CSS 4:26 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Sticky Footer Help Please

Need help with a css sticky footer.

         

pixelspace

10:23 pm on Jul 19, 2010 (gmt 0)

10+ Year Member



I am working am having an extremely hard time getting a sticky footer to work on my latest project. If you would be so kind please take a look and let me know if you have any ideas, comments or suggestions. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Spettigue Law Office | Ontario Criminal Law</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Language" content="en-us" />
  <meta name="description" content="Description" />
  <meta name="keywords" content="Keywords" />
  <meta name="author" content="Pixelspace Studio // Neil Livingtone" />
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">

<div class="header">
<a href="index.html"><img src="img/nav-home.gif" alt="Homepage" border="0px" /></a>
<a href="index.html"><img src="img/nav-about.gif" alt="About our Team" border="0px" /></a>
<a href="index.html"><img src="img/nav-services.gif" alt="Services" border="0px" /></a>
<a href="index.html"><img src="img/nav-contact.gif" alt="Contact Us" border="0px" /></a>
<a href="index.html"><img src="img/nav-faq.gif" alt="F.A.Q." border="0px" /></a>
<a href="index.html"><img src="img/nav-rights.gif" alt="Know your Rights" border="0px" /></a>
</div>
  
  <div class="showcase">
</div>
  
  <div class="location">
  <img src="img/content-div.gif" /><br />
  154 JACKSON STREET EAST&nbsp;&nbsp;&nbsp;&nbsp;HAMILTON, ONTARIO&nbsp;&nbsp;&nbsp;&nbsp;(905) 921 - 9368<BR />
  <img src="img/content-div.gif" />
</div>
  
  <div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget est quis eros adipiscing ornare ut ac metus. Pellentesque dapibus cursus mollis. Fusce at iaculis ante. Praesent nulla nisi, pulvinar ac fermentum ac, imperdiet eget ligula. Phasellus quis quam non mi adipiscing venenatis vitae facilisis tortor. Duis scelerisque arcu euismod ipsum pellentesque ac convallis elit lacinia. Praesent sollicitudin laoreet euismod. Nulla sed elit vitae turpis pulvinar gravida. Curabitur ipsum mi, hendrerit vel laoreet sed, consequat eget mi. Nunc in tellus ut urna vulputate ultrices. Curabitur non scelerisque dui. Fusce nisl risus, luctus vestibulum mollis eget, rhoncus vel sapien. Donec massa quam, molestie et laoreet id, porttitor quis orci. Suspendisse vitae nisi urna, at pulvinar massa. Nunc varius dui in diam iaculis facilisis. Proin placerat auctor eros et rhoncus. Aliquam convallis pulvinar augue non lobortis. Etiam tortor eros, bibendum porta tincidunt eu, malesuada ut ipsum. Aliquam erat volutpat.

Praesent nec enim sem. Morbi ultricies volutpat rhoncus. Nullam lacinia, arcu at elementum ultricies, nulla leo elementum metus, in pharetra massa risus sed nulla. Cras fringilla aliquam magna, eu vulputate nibh vestibulum ac. Aliquam ut mi quis lorem interdum semper in a erat. Vestibulum vel purus a arcu porta iaculis. Duis sit amet elit ac est mattis egestas. Suspendisse libero nibh, pretium vitae elementum sit amet, accumsan vel libero. Aliquam erat metus, ultrices ac cursus vel, ultricies aliquam urna. Aenean et quam quis turpis luctus ullamcorper quis pellentesque metus. Etiam eu tortor metus, id pellentesque nunc. Maecenas auctor sollicitudin vehicula. Aliquam erat volutpat. Sed a neque dui, ac scelerisque est.

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget est quis eros adipiscing ornare ut ac metus. Pellentesque dapibus cursus mollis. Fusce at iaculis ante. Praesent nulla nisi, pulvinar ac fermentum ac, imperdiet eget ligula. Phasellus quis quam non mi adipiscing venenatis vitae facilisis tortor. Duis scelerisque arcu euismod ipsum pellentesque ac convallis elit lacinia. Praesent sollicitudin laoreet euismod. Nulla sed elit vitae turpis pulvinar gravida. Curabitur ipsum mi, hendrerit vel laoreet sed, consequat eget mi. Nunc in tellus ut urna vulputate ultrices. Curabitur non scelerisque dui. Fusce nisl risus, luctus vestibulum mollis eget, rhoncus vel sapien. Donec massa quam, molestie et laoreet id, porttitor quis orci. Suspendisse vitae nisi urna, at pulvinar massa. Nunc varius dui in diam iaculis facilisis. Proin placerat auctor eros et rhoncus. Aliquam convallis pulvinar augue non lobortis. Etiam tortor eros, bibendum porta tincidunt eu, malesuada ut ipsum. Aliquam erat volutpat.





</div>
  
    <div class="sidebar">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget est quis eros adipiscing ornare ut ac metus. Pellentesque dapibus cursus mollis. Fusce at iaculis ante. Praesent nulla nisi, pulvinar ac fermentum ac, imperdiet eget ligula. Phasellus quis quam non mi adipiscing venenatis vitae facilisis tortor. Duis scelerisque arcu euismod ipsum pellentesque ac convallis elit lacinia. Praesent sollicitudin laoreet euismod. Nulla sed elit vitae turpis pulvinar gravida. Curabitur ipsum mi, hendrerit vel laoreet sed, consequat eget mi. Nunc in tellus ut urna vulputate ultrices. Curabitur non scelerisque dui. Fusce nisl risus, luctus vestibulum mollis eget, rhoncus vel sapien. Donec massa quam, molestie et laoreet id, porttitor quis orci. Suspendisse vitae nisi urna, at pulvinar massa. Nunc varius dui in diam iaculis facilisis. Proin placerat auctor eros et rhoncus. Aliquam convallis pulvinar augue non lobortis. Etiam tortor eros, bibendum porta tincidunt eu, malesuada ut ipsum. Aliquam erat volutpat.

</div>

  
</div>
<div class="footer">
       <p>Copyright (c) 2008</p>
     </div>
   
     
 
 


 


</body>
</html>


/*
@charset "UTF-8";
Author: Neil Livingstone
Author URI: http://pixelspace.ca
*/

body {
background-color: #e1e1e1;
background-image: url('img/header.gif');
background-repeat: repeat-x;
font-family: Times New "Times New Roman", Times, serif;
font-size: 14px;
color: #672C2C;
}

a { 
font-family: Times "Times New Roman", Times, serif; font-size: 14px; color: #672C2C; text-decoration: none;
}

a:hover { 
font-family: Arial, Verdana, sans-serif; font-size: 18px; color: #672C2C;
}

h1 { 
font-family: Arial, Verdana, sans-serif; font-size: 32px; color: #672C2C; 
}
h2 {
font-family: Arial, Verdana, sans-serif; font-size: 24px; color: #672C2C; 
}

.container {
width: 800px;
margin: 0 auto;
text-align: justify;
padding-bottom: 3em;
}

.header {
position: absolute;
top: 6px;
background-image: url('img/header.gif');
width: 800px;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #FFF;
}

.showcase {
position: absolute;
top: 35px;
background: url('img/showcase.gif');
width: 800px;
height: 130px;
}

.location {
position: absolute;
top:165px;
width: 800px;
height: 30px;
text-align: center;
font-family: Times New Roman;
font-size: 14px;
color: #672C2C;
letter-spacing: 5px;
line-height: 22px;
}

.content {
position: absolute;
top: 200px;
background-image: url('img/content-bg.gif');
width: 535px;
text-align: justify;
font-family: Times New Roman;
font-size: 14px;
color: #672C2C;
padding-right: 10px;

}

.sidebar {
position: absolute;
top: 199px;
left: 785px;
width: 250px;
background-color: #e1e1e1;
text-align: justify;
font-family: Times New Roman;
font-size: 14px;
clear: both;
color: #672C2C;
}

.footer {
 clear: both;
 position: relative;
 z-index: 10;
 height: 3em;
 margin-top: -3em;
}




Thank.

Shado

1:46 pm on Jul 21, 2010 (gmt 0)

10+ Year Member



Eish! What a code dump :shock:

I would suggest using some ID's and what's the width of your footer?


Also try wrapping your content and sidebar in a #div - what should help keep them together. If you want those 2 classes to be centred in the middle of your window the set the #div margin to auto.

Try something like this:
<div id="header">
<div class="showcase"></div>
<div class="location"></div>
</div>
<div id="container">
<div class="content"></div>
<div class="sidebar"></div>
</div>
<div id="footer"></div>

CSS:
#header {this will wrap Showcase and location in 1 div}
#header .showcase {}
#header .location {}
#container {this will wrap content and sidebar in 1 div}
#container .content {}
#container .sidebar {}
#footer {}

The footer should sort it self out

pixelspace

5:22 pm on Jul 21, 2010 (gmt 0)

10+ Year Member



I was hoping for the footer to span 100%.

Shado

5:31 pm on Jul 21, 2010 (gmt 0)

10+ Year Member



Looks like you and kevve are using the same template.

Have a look at this link - you might find a solution.

[webmasterworld.com ]

pixelspace

7:26 pm on Jul 21, 2010 (gmt 0)

10+ Year Member



I have reworked the code using the method you suggested however the footer is still not sticking to the bottom.

[pixelspace.ca ]

The link above is where the reworked code is located.

[pixelspace.ca...] (HTML)
[pixelspace.ca...] (CSS)

Let me know if you have any insite as to why this is happening. Thanks again for all the help.

Shado

9:13 am on Jul 22, 2010 (gmt 0)

10+ Year Member



Do you want the footer to stick to the bottom of the page or the window? Those are two different things all together.

Try

#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#fff;
}

You can read more about this at [matthewjamestaylor.com ]

Now in future remember Google is your friend! When you are stuck with your code do a Google search and I promise you 98% of the time you will find a solution to your problem.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:26 pm May 1, 2026