CSS to keep footer below content regardless of content length

perfectdesign · Sep 7, 2009

I'm trying to set the footer settings in my stylesheet that will keep the footer content below the general page content...not necessarily stick it to the bottom of the page, just keep it below the content regardless of how much actual content there is. I've searched for almost 2 weeks through various search engines and nothing that I have found works.

Here is the css code:

Code:

#footer {
	position: absolute; bottom: 0px; left: 0;
	width: 100%;
	height:auto;
	}

And here is the html code:

Code:

<body>
<div id="page">
	---various content---
        <div id="footer">
		This site designed and maintained by <a href="[URL unfurl="true"]http://www.perfectionindesign.com"[/URL] target="_blank">Perfection In Design</a>
	</div>
</div>
</body>

And for reference, here is the page itself (you can see that the footer can be seen in the same place as the logo image):

http://www.huguenotbats.com/redesignfiles

I'm still fairly new to designing with stylesheets as opposed to tables so I was greatly appreciate any help.

Crystal

feherke · Sep 7, 2009

Hi

Had a look at the solution found by darryncooke in thread215-1547562 ?

Feherke.

http://rootshell.be/~feherke/

audiopro · Sep 7, 2009

Put the footer div after the page div and remove the positioning element.

Keith

http://www.studiosoft.co.uk

vacunita · Sep 7, 2009

Default behavior is for higher content to push down lower content, making lower content always be at the bottom of higher content.

Example:

Code:

 -------------------
|                   |
|                   |
|  Higher Content   |
|                   |
|                   |
 -------------------
 -------------------
|                   |
|                   |
|  Lower Content    |
|                   |
|                   |
 -------------------

With no style rules applied that should always work.

Giving an element absolute positioning takes it out of the regular document flow so it no longer interacts with anything else in the page. Setting its position will make it stay there regardless of what happens with the rest of the page.

Now depending on what else you may have for the content, or what other styles are applied to elements inside it may affect the default behavior too.

Removing the absolute positioning of the footer div, and assuming there is nothing else affecting it like floats that haven't been cleared, the content should by default push it down always.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

perfectdesign · Sep 7, 2009

So far none of the suggestions have worked. Maybe I should have provided a little more information.

Here is the whole stylesheet (in case there is something else that is influencing the positioning of the footer):

Code:

/* CSS Document */

/*page*/

#page {
	background-color: #FFFFFF;
	width: 100%;
	height: auto;
	}

a {
	text-decoration: none;
	color: #33396e;
	}

h1 {
	font-size: 24px;
	font-variant: small-caps;
	text-align: center;
	color: #33396e;
	}

h2 {
	font-size: 18px;
	text-align: center;
	}

h3 {
	font-size: 16px;
	text-align: center;
	color: #33396e;
	}

h4 {
	font-size: 16px;
	text-align: center;
	font-weight: 100;
	}

p {
	text-indent: 25px;
	text-align: justify;
	}

.subp {
	text-align: center;
	font-size: 16px;
	}

.subp2 {
	text-align: center;
	font-size: 2px;
	}


/*header*/

#header {
	background-color: #FFFFFF;
	width: 100%;
	height: 250px;
	}

.header {
	position: absolute;
	}

.logo {
	position: absolute; top: 15px; left: 15px;
	}


/*menu*/

#menu {
	background-color: #FFFFFF;
	width: 100%;
	height: 22px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}

.menu {
	position: absolute; top: 250px; right: 15px;
	color: #33396e;
	display: inline;
	float: right;
	font-size: 20px;
	}

.menu2 {
	color: #33396e;
	font-size: 16px;
	text-align: center;
	width: auto;
	}


/*body*/

#body {
	background-color: #FFFFFF;
	width: 100%;
	height: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	}

.body {
	position: absolute; top: 300px; left: 6px; right: 6px;
	width: 98%;
	}

.leftcolumn {
	position: absolute; top: 300px; left: 5px;
	width: 1%;
	}

.rightcolumn {
	position: absolute; top: 300px; right: 5px;
	width: 1%;
	}


/*footer*/

#footer {
	position: absolute; bottom: 0px; left: 0;
	width: 100%;
	height:auto;
	}

And the basic structure of the html code is:

Code:

<div id=page>
     <div id=header>
          <div class=logo></div>
     </div>
     <div id=menu>
          <div class=menu></div>
     </div>
     <div id=body>
          <div class=body></div>
          <div class=menu2></div>
     </div>
     //tried adding div id=footer here//
</div>
//tried adding div id=footer here//

jpadie · Sep 7, 2009

Keith and Phil's suggestions look perfect. i'm sure feherke's link will have helped too.

put the footer div outside (and below) the page div and delete the footer css declaration. the default rendering is what you are after. absolute positioning puts the footer on the bottom of the viewport not at the bottom of the page of content.

darryncooke · Sep 7, 2009

your css file is very bloated.

if you are going to use ID's for an element why are you adding an extra style for the same element and adding another div within the ID'd div with the style?

You also dont need a page container

try setting a menu with width 100% and height of 22px.

Also since the menu is the first element and you want it 250px from top just set your body top margin.

also what vacunita said is spot on and you should take it to heart. your absolute positioning is messing up your layout a lot.

try just making a simple page of.

<div id=header>
<div id=menu>
<div id=body>
<div id=footer>

that will give you what you want. then add styles accordingly and content within. if you really want to learn this just start from here and then slowly add more styling.

Darryn Cooke

http://www.darryncooke.com

| The New Orange County Graphic designer and Marketing and Advertising Consultant

http://www.bloobie.com

| Marketing and Advertising blog

vacunita · Sep 7, 2009

Wow! talk about abusing the Position:absolute; property.

By the looks of your layout it seems completely unnecessary to use any, let alone that much positioning.

Since everything is positioned and has top and left specified, they adhere to those coordinates.

Here, perhaps this will get you where you want to go:

CSS:

#header {
    background-color: #FFFFFF;
    width: 100%;
    height: 250px;
    background-color:#0000FF;
    }


.logo {
    width:250px;
    display:inline;
    background-color:#FFFFFF;
    margin:15px;
    }


/*menu*/

#menu {
    background-color: #FFFFFF;
    width: 100%;
    height: 22px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
border:1px solid red;
    }

.menu {
    
    color: #33396e;
    display: inline;
    float: right;
    font-size: 20px;
    background-color:#FF44FF;
    }
4:56 PM 9/7/2009
.menu2 {
    color: #FFFFFF;
    font-size: 16px;
    text-align: center;
    width: auto;
    background-color:#99AA00;
    }

#menu2{
color: #FFFFFF;
}
/*body*/

#body {
    background-color: #333333;
    width: 100%;
    height: auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18px;
    color:#FFFFFF;
    }

.body {
    
    width: 98%;
    }

.leftcolumn {
    width: 1%;

    }

.rightcolumn {

    width: 1%;
    }


/*footer*/

#footer {
    background-color:#AABB55;
    width: 100%;
    height:auto;
    }

Your HTML is basically the same, with the added footer DIV.

HTML:

<div id=page>
     <div id=header>
          <div class=logo>Logo</div>
     </div>
     <div id=menu>
          <div class=menu>Menu</div>
     </div>
     <div id=body>
          <div class=body>body</div>
          <div class=menu2>menu2<br><br><br><br><br><br><br><br><br><br><br></div>
<div id=footer>Footer</div>
     </div>

</div>

I added the background colors just see where everything is, and the <br> to add space to the content to make sure the footer is doing what it's supposed to.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

perfectdesign · Sep 8, 2009

Thank you so much! I'm still learning (and therefore updating) using CSS over tables. Guess I should focus a bit more on the basics.

audiopro · Sep 8, 2009

The transition from tables to CSS is a steep learning curve and involves having to unlearn some very deeply routed concepts. Get out of the habit of 'converting' tables into CSS, look at the overall layout and fit the bits together as required.

I made the same mistakes as you did by trying to position everything on the page but it is a habit you will lose and once you have grasped the concepts, you will never look back.

Keith

http://www.studiosoft.co.uk

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS to keep footer below content regardless of content length

perfectdesign

Programmer

feherke

Programmer

audiopro

Programmer

vacunita

Programmer

perfectdesign

Programmer

jpadie

Technical User

darryncooke

Technical User

vacunita

Programmer

perfectdesign

Programmer

audiopro

Programmer

Similar threads

Part and Inventory Search

Sponsor