homepage Welcome to WebmasterWorld Guest from 54.196.162.238
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
How to make Footer stay at bottom
footer sticks to bottom of main column rather than bottom of screen
yonnermark




msg:1201257
 7:10 pm on Jan 16, 2005 (gmt 0)


I am wanting my footer to be firmly rooted to the bottom of the page regardless of which of my 3 css columns is the longest.

At the moment it just sticks to the bottom of the middle column and so when the side columns are longer than the middle column, the divs overlap.

I have used the Al Sparber CSS 3-column css template below and have just customised it a little.

My css file contents are below, can you figure out how I could change it to keep the footer at the bottom?

Thanks;

/* CSS Document */

#header
{
margin-top: 0px;
margin-left: 12px;
margin-right: 20px;
margin-bottom: 0px;
padding: 10px;
color: #000000;
background-color: white;
border-bottom: solid 1px #000000;
}

#headerspacer
{
font-size: 1px;
display: block;
}

/* Set up NN4 values - purely to prevent vertical "looseness" */

#headerspacer
{
margin: 0px;
margin-top: -10px;
padding: 0px;
}

/* Set up default spacer values */
#headerspacer
{
/*/*/
margin: 0px;
padding: 8px;
/* */
}

#centerBox
{
position: absolute;
left: 0px;
width: 76%;
z-index: 3;
}

#centerContent
{
margin: 0px;
margin-right: 0px;
margin-left: 200px;
padding: 10px;
color: #000000;
background-color:white;
background-image: url(http://www.smart-pianos.com/assets/mfimages/tbg.gif);
background-repeat: repeat-x;
}

#leftBox
{
position: absolute;
left: 10px;
width: 160px;
z-index: 4;
}

#leftContent
{
margin-right: 0px;
padding: 5px 10px 10px 10px;
color: #000000;
background-color: #f4f4f4;
border-right: solid 1px #000000;
border-bottom: solid 1px #000000;
}

#rightBox
{
float: right;
z-index: 1;
}

/* NN4 collapses the right column if the width is specified
Other bowsers collapse if it isn't */

#rightBox
{
/*/*/
width: /*22%*/150px;
/* */
}

#rightContent
{
margin-right: 2px;
padding: 0px;
color: #000000;
}

#footer
{
margin-top: 10px;
margin-left: 12px;
margin-right: -30%;
margin-bottom: 0px;
padding: 10px;
color: #000000;
background-color: #f4f4f4;
border-top: solid 1px #000000;
}

/* unset NN4 spacing values for footer */
#footer
{
/*/*/
margin-top: 20px;
/* */
}

I would have posted the URLs in question but this place is too strict for that :(

[edited by: SuzyUK at 10:18 am (utc) on Jan. 17, 2005]

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved