100% Browser Height Attribute for website

This is a follow up to question ID: 26883567. I am trying to fix the footer issue on the following site:

http://JustTheDriver.com

I was originally trying to set up the HTML and body content to be 100% of the viewers browser height. In trying to do this, I implemented the changes recommended from EE to my CSS, layout & style 3.

in Layout.css:

html,
body {
      border: 0 none;
      margin: 0;
      padding: 0;
      height: 100%;

in Stlye3.css:

#container {
      background-color: #fff;
      width: 900px;
      margin: -40px auto 0;  
      /* negative top margin is to allow spacer for the footer */
      border: 1px solid #b7b7b7;
      border-top: 0 none;
      border-bottom: 0 none;
      min-height: 100%;
}
* html #container {height:100%} /* for IE6 */

#masthead {
      text-align: right;
      background-color: #369;
      width: 900px;
      padding-top: 40px; /* total height of the footer */

as you can see here: http://JustTheDriver.com/employment/employment.htm

It's not working, and now the footer is stretched, maybe because of the 100% height attribute, and the CSS for the footer seems to be ignored. I need to:

 1) fix the footer: should be 40px, white centered arial approx 8pt text, thee <P> total

 2) Have the footer always appear at the bottom of the viewer's browser, while maintaining  page's CSS.

Please advise Experts,

Thanks!
TonyT7220Asked:
Who is Participating?
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
The <p>s put margin before and after them so they will stretch your div.  Try this inline styling and use the <br> to make it only one <p>.
<div id="footer" style="width:900px;style:list-style-type: none; margin: 0 auto;padding: 0; width:900px;height:40px">

		<p style="margin:0px;padding:0px;"><a href="../index.html">Home</a> | <a href="../about/about.htm">
		About</a> |
		<a href="../contact/contact.htm">Contact</a> | <a href="../employment/employment.htm">

		Employment</a> |
		<a href="../faq/faq.htm">FAQ</a> |
		<a href="../services/services.htm">Services</a><br>
		Copyright © 2011 Just The Driver, LLC. All Rights Reserved.</p>

Open in new window

0
 
TonyT7220Author Commented:
Didn't seem to work Dave. Tried it here:

http://JustTheDriver.com/employment/employment.htm
0
 
Dave BaldwinFixer of ProblemsCommented:
You have CSS for 'footer' in 3 places: an external file, in the <head>, and inline in the div.  You're just writing all over yourself.  You need to get rid of 2 of the 3 so you can see what you're doing.

In addition you have changed something else in the files so it's not 100% anymore.
0
 
TonyT7220Author Commented:
I had to jerry rig it to work, but now it's fine. Thanks Dave
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.