asked on

CSS Footer: Techniques I Found Don't Work

I have played with this for hours and looked at many previous solutions but for the life of me I can NOT get this to work.

I want the footer to be at the bottom of the page the entire time.

Examples:
When there is more content than what can fit in the frame, I want it to display like this:
http://www.redvent.com

When there is LESS content, and a scroll bar is not required, I get this:
http://www.redvent.com/template/customize.aspx?templateid=3556 ...

Any ideas?

CSS
---------------
body {
padding:0;
text-align:center;
background: #ffffff;
font-family: Arial, Helvetica, sans-serif;
border-top: 16px solid #000000;
height: 100%;
position: relative;
margin: 0;
}
#wrap {
width:822px;
text-align:left;
margin-left:auto;
margin-right:auto;
position: relative;
}
#content {
clear:both;
background-color: #fff;
position:relative;
margin-left:38px;
margin-right:38px;
width:762px;
position: relative;
height:100%;
}
#footer {
width: 100%;
clear:both;
background: url(images/footer.png) repeat-x bottom;
padding: 30px 0;
position: relative;
}
#footerMenu {
width: 100%;
clear:both;
background-color: #000000;
padding-bottom: 30px;
padding-top: 20px;
position: relative;
}
.footerLogo {
right: 300px;
position: relative;
}
#footer p {
font-size: .7em;
text-align: center;
margin-top: 10px;
margin-bottom: 20px;
position: relative;
}

RELEVANT HTML
-------------------
<html>
<body>
<div id="wrap">
<div id="content">
</div>
</div>
<div id="footer">
<p>Copyright © 2006 Redvent. All trademarks and copyrights remain the property of their respective owners.</p>
</div>
<div id="footerMenu"><img src="images/footerlogo.png" alt="Redvent" />
</div>
</body>
</html>

Mark Steggles

Hey,

You need to use positioning to achieve the desired affect, try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">

* {
padding:0;
margin:0;
}
html,body {
width:100%;
height:100%;
min-width:100%;
min-height:100%;
}
body {
padding:0;
text-align:center;
background: #ffffff;
font-family: Arial, Helvetica, sans-serif;
border-top: 16px solid #000000;
position: relative;
margin: 0;
}
#wrap {
min-height:100%;
width:100%;
text-align:left;
margin-left:auto;
margin-right:auto;
position: relative;
}
#content {
clear:both;
background-color: #fff;
position:relative;
margin-left:38px;
margin-right:38px;
width:762px;
position: relative;
height:100%;
}
#footer {
width: 100%;
clear:both;
background: url(images/footer.png) repeat-x bottom;
padding: 30px 0;
position: absolute;
bottom:0;
left:0;
border:1px dashed #345;
}
#footerMenu {
width: 100%;
clear:both;
background-color: #000000;
padding-bottom: 30px;
padding-top: 20px;
position: relative;
}
.footerLogo {
right: 300px;
position: relative;
}
#footer p {
font-size: .7em;
text-align: center;
margin-top: 10px;
margin-bottom: 20px;
position: relative;
}
</style>

</head>
<body>
<div id="wrap">
<div id="content">
loads of content<br />
loads of content<br />
loads of content<br />
loads of content<br />
loads of content<br />
loads of content<br />
loads of content<br />
loads of content<br />
loads of content<br />
loads of content<br />
loads of content<br />
loads of content<br />
loads of content<br />
loads of content<br />
loads of content<br />
loads of content<br />
loads of content<br />
loads of content<br />
loads of content<br />
loads of content<br />
loads of content<br />

</div>
<div id="footer">
<p>Copyright © 2006 Redvent. All trademarks and copyrights remain the property of their respective owners.</p>
</div>
<div id="footerMenu"><img src="images/footerlogo.png" alt="Redvent" /></div>
</div>

</body>
</html>

LeeKowalkowski

That's kind of always off screen in IE6 and all over the place in FF1.5, and the content runs into the footer. There's no solution I have ever seen to have it exactly as you describe without using a table (not for all these browsers: >=IE6, >=FF1.5, >=Opera 8, >=Safari 2).

If you use absolute positioning, it will always be at the bottom of the window's initial size, but the other content would run through it.

I just find it easier to have a minimum height for your content and plop your footer under that - end the page. The page might not fill the window, but for most scenarios it does.

--
Lee

ASKER CERTIFIED SOLUTION

oceanbeach

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

LeeKowalkowski

I find oceanbeach's solution better, works very well for IE and Firefox & Safari, the footer is not at the bottom in Opera though after resizing the window - but I could live with that.

You may also find these "wireframe" models work until you start applying more splashes of colour and artwork, then you see other things you don't quite like, such as the 200px bottom-padding on the #content element. It can be quite consuming concealing all those hacks. If you can keep it invisible then oceanbeach's solution is very good, as usual, despite the "* html" hack ;-) .

--
Lee

psalesses

ASKER

Neither solution worked. It threw my entire layout off... it took the centered page and moved it to the left, it threw the logo at the bottom over to the right, and the spacing was wayyyy off...

http://www.redvent.com/index.aspx
http://www.redvent.com/style.css

???

psalesses

ASKER

I messed with Oceans code and got it to work perfectly... It was one small line. I hate CSS... Change one thing and layout goes to sh!* Anyway thanks for your help!

oceanbeach

Hi psalesses,

Glad to help out!

-OB