Welcome to WebmasterWorld Guest from 54.147.44.93

Forum Moderators: not2easy

Message Too Old, No Replies

How to make Footer stay at bottom

footer sticks to bottom of main column rather than bottom of screen

     

yonnermark

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

10+ Year Member




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]

 

Featured Threads

Hot Threads This Week

Hot Threads This Month