?
Solved

CSS Footer: Techniques I Found Don't Work

Posted on 2007-07-31
7
Medium Priority
?
228 Views
Last Modified: 2008-02-01
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>
0
Comment
Question by:psalesses
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 30

Expert Comment

by:Mark Steggles
ID: 19604980
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
 
LVL 16

Expert Comment

by:LeeKowalkowski
ID: 19607171
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
 
LVL 12

Accepted Solution

by:
oceanbeach earned 1500 total points
ID: 19608867
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 16

Expert Comment

by:LeeKowalkowski
ID: 19609270
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
 

Author Comment

by:psalesses
ID: 19611791
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
 

Author Comment

by:psalesses
ID: 19612089
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
 
LVL 12

Expert Comment

by:oceanbeach
ID: 19612724
Hi psalesses,

Glad to help out!

-OB
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question