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 &copy; 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>
psalessesAsked:
Who is Participating?
 
oceanbeachCommented:
Hello psalesses,

Try this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>html</title>
<style type="text/css">
* { margin: 0; }
html { height: 100%; }
body {
      text-align:center;
      background: #ffffff;
      font-family: Arial, Helvetica, sans-serif;
      /*border-top: 16px solid #000000;*/
      height: 100%;
}
#wrap {
      width:822px;
      text-align:left;
      position: relative;
      min-height: 100%;
}
* html #wrap { height: 100%; }
#content {
      background-color: #fff;
        margin: 0 38px;
      width:762px;
        padding-bottom: 200px;
}
#footer {
      width: 100%;
      background: #060;
      padding: 30px 0;
      position: relative;
      height: 140px;
      margin-top: -200px;
}
#footerMenu {
      width: 100%;
      background-color: #ff0;
      padding: 20px 0 30px 0;
}
#footer p {
      font-size: .7em;
      text-align: center;
        margin: 10px 0 20px 0;
}
</style>
</head>
<body>
<div id="wrap">
  <div id="content">
    <p>CONTENT</p>
  </div>
</div>
<div id="footer">
  <p>Copyright &copy; 2006 Redvent. All trademarks and copyrights remain the property of their respective owners.</p>
  <div id="footerMenu"><img src="images/footerlogo.png" alt="Redvent" /> </div>
</div>
</body>
</html>

I hope this helps!

oceanbeach
0
 
Mark StegglesWeb DeveloperCommented:
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>
<!--[if lte IE 7]>
<style type="text/css">
#wrap {
height:100%;
}
</style>
<![endif]-->
</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 &copy; 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>
0
 
LeeKowalkowskiCommented:
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
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
LeeKowalkowskiCommented:
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
0
 
psalessesAuthor Commented:
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

???
0
 
psalessesAuthor Commented:
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!
0
 
oceanbeachCommented:
Hi psalesses,

Glad to help out!

-OB
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.