Sticking footer to bottom of viewport

Hello All,

I have been searching for ways to place a footer at the bottom of the browser window. If the conent flows below (making the user scroll), the footer should be positioned below the content. BUT if the content does not fill up the screen it should be placed at the bottom of the browser and NOT the content.

I have tried to implement many techniques that I have found online but none of the seem to work for me.

Can someone fish through my code and see if they can get something to work? Currently, the footer flows after the longest piece of content.

Thanks tons!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
 
<body id="home">
 
<div id="content">
    <div id="header">
        <div id="htop">
            <div id="logo"><img src="images/logo.gif" /></div>
            <div id="nav-menu">
               <ul>
                  <li><a href="index.cfm" id="home">Home</a></li>
                  <li><a href="Events.cfm" id="events">Our Events</a></li>
                  <li><a href="aboutus.cfm" id="aboutus">About SGC</a></li>
                  <li><a href="contactus.cfm" id="contactus">Contact Us</a></li>
              </ul>
</div>
        </div>
    </div>
    <div id="contentcontainer">
        <div id="missioncontentcontainer">
            <div id="mission">
                <h3>Our Mission:</h3>
                <p>Text will go here</p>
            </div>
        </div>
        <div id="bodycontainer">
            <div id="newscontainer">
                <div class="sectionheader">
                    <h3>Recent News:</h3>
                </div>
                <div class="recentnewscontainer">
                    <p class="newsdate">Posted on 10/25/07 - [ Event ]</p>
                    <p class="newsarticle">News article will go here</p>
                </div>
                <div class="recentnewscontainer">
                    <p class="newsdate">Posted on 6/9/07 - [ Event ]</p>
                    <p class="newsarticle">News article will go here</p>
                </div>
            </div>
            <div id="eventscontainer">
                <div class="sectionheader">
                    <h3>Our Next Event:</h3>
                </div>
                <div class="nextevent">
                    <div><img src="images/golfoutingheader.gif" /></div>
                    <p>Event text will go here</p>
              </div>
            </div>
        </div>
    </div>
</div>
<div id="footer">
    <div id="footercontentcontainer">&copy; 2008</div>
</div>
</body>
</html>

Open in new window

IShivaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

IShivaAuthor Commented:
here is my css file
@charset "utf-8";
/* CSS Document */
 
 
html {
}
 
body {
	height:100%;
	margin:0;
	padding:0;
	font:13px "Trebuchet MS", arial, helvetica, sans-serif;
	color:#B3AB5D;
	background:#38383e;
	background-image:url(../images/background.gif);
	background-repeat:repeat-x;
}
 
a:visited, a:link {
	color:#f3c95d;
	background-color:transparent;
}
 
a:hover {
	color:#f5f5f5;
	text-decoration:none;
}
 
/* General styling */
body, div, span, acronym, h6, h5, h4, h3, h2, h1, radio, textarea, 
input, select, form, dd, dt, dl, ol, li, ul, br {margin:0;padding:0}
 
h1, h2, h3, h4, h5, h6 {color:#daa520;}
h1 {font-size:22px}
h2 {font-size:20px}
h3 {font-size:18px}
h4 {font-size:16px}
h5 {font-size:14px}
h6 {font-size:12px}
p {margin:5px;padding:0;line-height:19px}
img a {border:0}
img {border:0}
.clear {clear:both}
.left {text-align:left}
.center {text-align:center}
.right {text-align:right}
.nobold {font-weight:normal}
.uline {text-decoration:underline}
.highLight {background:#fef890;padding:0 2px}
 
#container {
position:relative;
min-height:100%;
}
 
#header {
margin:0 auto;
width:800px;
}
 
#htop {
height:149px;
}
 
#logo {
	margin:0;
	float:left;
	/* height:140px; */
	height:149px;
}
 
#contentcontainer {
	width:800px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
 
#missioncontentcontainer {
	width:800px;
}
 
#bodycontainer {
width:800px;
}
 
 
#newscontainer {
width:490px;
float:left;
}
 
#eventscontainer {
width:280px;
float:right;
color:#fdff9c;
}
 
 
/* Nav menu CSS */
 
#nav-menu {
	width:515px;
	height:26px;
	float:right;
	margin-top:79px;
}
 
#nav-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size:15px;
	font-weight:bold;
}
 
#nav-menu li {
	float: left;
	margin-left:5px;
}
 
#nav-menu li a {
	background-color:#1a1116;
	height: 25px;
	line-height: 25px;
	float: left;
	width: 120px;
	display: block;
	color: #daa520;
	text-decoration: none;
	text-align: center;
	border-top:solid 1px #505050;
	border-right:solid 1px #505050;
	border-left:solid 1px #505050;
 
}
 
#nav-menu li a:hover {
	width:122px;
	height:27px;
	line-height:27px;
	border:0;
	color:#eee8aa;
	background-color:transparent;
	}
	
body#home a#home,
body#events a#events,
body#aboutus a#aboutus,
body#contactus a#contactus {
	position:relative;
	bottom:15px;
	background-image:url(../images/currenttabbg.gif);
	background-repeat:repeat-x;
	background-position:bottom left;
	background-color:#1a1116;
	height: 40px;
	line-height: 40px;
	float: left;
	width: 120px;
	display: block;
	color: #cccccc;
	text-decoration: none;
	text-align: center;
	border-top:solid 1px #505050;
	border-right:solid 1px #505050;
	border-left:solid 1px #505050;
}
 
 
#mission {
	margin-bottom:25px;
	color:#cccccc;
	font-size:1.3em;
}
 
#mission h3 {
color:#b3ab5d;
}
 
#subcontainer {
width:800px;
}
 
#sub {
margin-bottom:25px;
}
 
.sectionheader {
margin-bottom:10px;
}
 
.recentnewscontainer {
border:solid 1px #464646;
margin-bottom:20px;
}
 
.newsdate {
font-size:11px;
color:#837d44;
font-weight:bold;
}
 
.newsarticle {
padding-left:5px;
}
 
#newslist {
margin-left: 50px;
padding-left: 0;
list-style-type: disc;
}
 
.nextevent {
	border:solid 1px #cca73d;
	background-color:#362f32;
	padding:10px;
}
 
 
.goldbold {
font-weight:bold;
color:#daa520;
}
 
#footer {
	width:100%;
	height:40px;
	clear:both;
	background-color:#4a1213;
	border-top:solid 1px #505050;
	margin-bottom:0;
}
 
#footercontentcontainer {
width:800px;
margin:0 auto;
}

Open in new window

0
TNameCommented:
Hi, try this:


1. Move the footer inside #content (place it *above* the last closing </div> tag):
...
</div>      

<div id="footer">
    <div id="footercontentcontainer">&copy; 2008</div>
</div>      

</div>    <!--   closing tag for #content  -->
</body>
</html>


2.
Define this style ruleset for #content:

#content {
   overflow:hidden;                     /*  make #content expand despite floated children  */
   position:relative;                     /*   position it relatively so that the absolutely positioned footer will  stay inside it */
   padding-bottom:50px;            /*   make room for the  absolutely positioned footer */
}
 

 3.
Position the footer with "position:absolute;" and specify a bottom value of e.g. 0px:
 
#footer {
      width:100%;
      height:40px;
      clear:both;
      background-color:#4a1213;
      border-top:solid 1px #505050;
      margin-bottom:0;
      
      position:absolute;           /*  <------add this  */
      bottom:0;                     /*  <------add this  */
}
 
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
IShivaAuthor Commented:
PERFECT! Thanks so much!
0
The Ultimate Tool Kit for Technolgy Solution Provi

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 for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

IShivaAuthor Commented:
TName:

Worked perfectly! I've been struggling with this for 2 weeks. Thanks a ton!

IShiva
0
IShivaAuthor Commented:
Actually, UGH. I was a bit too click happy with accepting your solution.

It did position it at the bottom however, if i resize my browser (the footer does move with the browser) and then scroll, the footer stays at that spot covering up content and scrolling with the screen.

Gonna try and use your code but tweak it a bit. Any suggestions?
0
TNameCommented:
>if i resize my browser (the footer does move with the browser) and then scroll, the footer stays at that spot covering up content and scrolling with the screen.


That's strange, it doesn't do that for me (tested in Fx2.0, IE6, Opera9)...
Are you sure you have applied all changes specified above?
What browser are you testing with?

How do you add content? I have pasted 5 paragraphs of "lorem ipsum" into this p tag:
<p>Event text will go here</p>

BTW, what do you mean by
"the footer does move with the browser" - that the footer does *not* stick to the bottom when scrolled?
I don't see how this could be, as it is positioned at the bottom of the tallest element (#content).
Please make sure that you have really applied all changes suggested above.
0
IShivaAuthor Commented:
I copied the exact code I posted and added your additions and edits. This time the footer just follows the content (like it was before). It is not at the bottom. I am testing in IE7 and FF 2.0.0.11

Since it works for you, can you post your code and your css code? Ill copy and paste and test.
0
TNameCommented:
Sorry, my mistake, I had misunderstood something in the original post.
Try this: additionally, add a min-height to #content and a clearing div at the bottom of #content. Here's the html (test with and without the "lorem ipsum" paragraph):
(css in the next post)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style5.css" rel="stylesheet" type="text/css" />
</head> 
<body id="home"> 
<div id="content">
    <div id="header">
        <div id="htop">
            <div id="logo"><img src="images/logo.gif" /></div>
            <div id="nav-menu">
               <ul>
                  <li><a href="index.cfm" id="home">Home</a></li>
                  <li><a href="Events.cfm" id="events">Our Events</a></li>
                  <li><a href="aboutus.cfm" id="aboutus">About SGC</a></li>
                  <li><a href="contactus.cfm" id="contactus">Contact Us</a></li>
              </ul>
</div>
        </div>
    </div>
    <div id="contentcontainer">
        <div id="missioncontentcontainer">
            <div id="mission">
                <h3>Our Mission:</h3>
                <p>Text will go here</p>
            </div>
        </div>
        <div id="bodycontainer">
            <div id="newscontainer">
                <div class="sectionheader">
                    <h3>Recent News:</h3>
                </div>
                <div class="recentnewscontainer">
                    <p class="newsdate">Posted on 10/25/07 - [ Event ]</p>
                    <p class="newsarticle">News article will go here</p>
                </div>
                <div class="recentnewscontainer">
                    <p class="newsdate">Posted on 6/9/07 - [ Event ]</p>
                    <p class="newsarticle">News article will go here</p>
                </div>
            </div>
            <div id="eventscontainer">
                <div class="sectionheader">
                    <h3>Our Next Event:</h3>
                </div>
                <div class="nextevent">
                    <div><img src="images/golfoutingheader.gif" /></div>
                    <p>
							
										Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla dictum quam id quam. Quisque commodo pede et leo. Suspendisse mollis pharetra arcu. Morbi nulla odio, placerat id, interdum id, blandit vel, libero. Sed a dolor. Curabitur nec neque eget sapien malesuada lacinia. In auctor, odio ac fringilla pellentesque, lacus odio dapibus est, vel viverra orci lectus eu lorem. Nullam egestas leo eget eros. Donec id ipsum. Nullam pretium leo volutpat enim. Proin ultricies, libero volutpat cursus varius, lacus lectus pulvinar mauris, volutpat consequat felis nibh eu dui. Nulla ultricies lorem a nunc. In sodales nunc sed eros. Donec ut enim. Pellentesque eleifend eros sit amet libero. In vitae quam et metus consectetuer blandit. Vestibulum porttitor mattis massa.
 
Nunc quis velit. Vivamus in justo. Curabitur sem. Proin ac lorem. Fusce laoreet sodales tellus. Nunc blandit, purus non pretium rutrum, odio tellus eleifend enim, et interdum lorem mi nec nunc. Vivamus scelerisque. Donec enim justo, eleifend euismod, euismod non, consectetuer et, orci. Sed accumsan diam eget tellus. Aenean pellentesque facilisis pede. Integer vel massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent iaculis. Aenean bibendum nibh ac pede. Maecenas nunc.
 
Vivamus commodo massa sit amet erat. Sed vel augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean placerat aliquam tellus. Duis id libero. In hac habitasse platea dictumst. Suspendisse potenti. In mattis, nisi at consequat fermentum, turpis nisi varius odio, consectetuer suscipit pede ipsum a dolor. Ut vel metus. Donec sit amet enim.
 
Etiam varius turpis. Phasellus rutrum porttitor neque. Etiam commodo, nisi scelerisque commodo fringilla, urna dui adipiscing orci, quis tristique dui tellus vel sem. Nulla in mauris. Quisque accumsan. Morbi lobortis, nulla varius luctus vestibulum, eros turpis aliquet pede, ut ullamcorper orci lectus eu mauris. Nullam ac ante sit amet ante rhoncus commodo. Curabitur blandit, risus nec tempor scelerisque, mauris pede interdum tortor, at tincidunt nibh ipsum vitae diam. Nulla viverra massa vel lorem. Aliquam aliquam, arcu elementum ornare viverra, turpis urna fringilla sapien, ut tristique elit nunc vitae nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse potenti. Mauris tincidunt luctus lectus. In a diam. Vestibulum pulvinar. Praesent gravida magna ac ante. Donec tincidunt nunc at eros. Suspendisse lorem ligula, ullamcorper quis, convallis at, egestas id, lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed malesuada lobortis risus.
 
Fusce ipsum. Pellentesque mollis enim in neque. Cras nisl. Donec eu est non dui pretium fringilla. Curabitur feugiat adipiscing velit. Phasellus eget mi. Aliquam erat volutpat. Fusce porta cursus lectus. Vivamus vulputate risus vel dolor. Integer risus magna, porttitor fermentum, accumsan congue, euismod ornare, nisl. Sed dictum leo sed dui egestas aliquam.
 
											
					</p>
              </div>
            </div>
        </div>
    </div>
	
 
<div id="footer">
    <div id="footercontentcontainer">&copy; 2008</div>
</div>
 
<div style="clear:both"></div>
 
</div>
 
 
</body>
</html>

Open in new window

0
TNameCommented:
And here's the css (all changes at the bottom):

Also, have a look at this (very similar) solution - also explaining why (surprisingly enough) "min-height" will work in IE6 here:
http://www.alistapart.com/articles/footers
@charset "utf-8";
/* CSS Document */
 
 
 
 
body {	
	margin:0;
	padding:0;
	font:13px "Trebuchet MS", arial, helvetica, sans-serif;
	color:#B3AB5D;
	background:#38383e;
	background-image:url(../images/background.gif);
	background-repeat:repeat-x;
}
 
a:visited, a:link {
	color:#f3c95d;
	background-color:transparent;
}
 
a:hover {
	color:#f5f5f5;
	text-decoration:none;
}
 
/* General styling */
body, div, span, acronym, h6, h5, h4, h3, h2, h1, radio, textarea, 
input, select, form, dd, dt, dl, ol, li, ul, br {margin:0;padding:0}
 
h1, h2, h3, h4, h5, h6 {color:#daa520;}
h1 {font-size:22px}
h2 {font-size:20px}
h3 {font-size:18px}
h4 {font-size:16px}
h5 {font-size:14px}
h6 {font-size:12px}
p {margin:5px;padding:0;line-height:19px}
img a {border:0}
img {border:0}
.clear {clear:both}
.left {text-align:left}
.center {text-align:center}
.right {text-align:right}
.nobold {font-weight:normal}
.uline {text-decoration:underline}
.highLight {background:#fef890;padding:0 2px}
 
#container {
position:relative;
min-height:100%;
}
 
#header {
margin:0 auto;
width:800px;
}
 
#htop {
height:149px;
}
 
#logo {
	margin:0;
	float:left;
	/* height:140px; */
	height:149px;
}
 
#contentcontainer {
	width:800px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
 
#missioncontentcontainer {
	width:800px;
}
 
#bodycontainer {
width:800px;
}
 
 
#newscontainer {
width:490px;
float:left;
}
 
#eventscontainer {
width:280px;
float:right;
color:#fdff9c;
}
 
 
/* Nav menu CSS */
 
#nav-menu {
	width:515px;
	height:26px;
	float:right;
	margin-top:79px;
}
 
#nav-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size:15px;
	font-weight:bold;
}
 
#nav-menu li {
	float: left;
	margin-left:5px;
}
 
#nav-menu li a {
	background-color:#1a1116;
	height: 25px;
	line-height: 25px;
	float: left;
	width: 120px;
	display: block;
	color: #daa520;
	text-decoration: none;
	text-align: center;
	border-top:solid 1px #505050;
	border-right:solid 1px #505050;
	border-left:solid 1px #505050;
 
}
 
#nav-menu li a:hover {
	width:122px;
	height:27px;
	line-height:27px;
	border:0;
	color:#eee8aa;
	background-color:transparent;
	}
	
body#home a#home,
body#events a#events,
body#aboutus a#aboutus,
body#contactus a#contactus {
	position:relative;
	bottom:15px;
	background-image:url(../images/currenttabbg.gif);
	background-repeat:repeat-x;
	background-position:bottom left;
	background-color:#1a1116;
	height: 40px;
	line-height: 40px;
	float: left;
	width: 120px;
	display: block;
	color: #cccccc;
	text-decoration: none;
	text-align: center;
	border-top:solid 1px #505050;
	border-right:solid 1px #505050;
	border-left:solid 1px #505050;
}
 
 
#mission {
	margin-bottom:25px;
	color:#cccccc;
	font-size:1.3em;
}
 
#mission h3 {
color:#b3ab5d;
}
 
#subcontainer {
width:800px;
}
 
#sub {
margin-bottom:25px;
}
 
.sectionheader {
margin-bottom:10px;
}
 
.recentnewscontainer {
border:solid 1px #464646;
margin-bottom:20px;
}
 
.newsdate {
font-size:11px;
color:#837d44;
font-weight:bold;
}
 
.newsarticle {
padding-left:5px;
}
 
#newslist {
margin-left: 50px;
padding-left: 0;
list-style-type: disc;
}
 
.nextevent {
	border:solid 1px #cca73d;
	background-color:#362f32;
	padding:10px;
}
 
 
.goldbold {
font-weight:bold;
color:#daa520;
}
 
 
 
#footercontentcontainer {
width:800px;
margin:0 auto;
}
 
 
/**********************************/
 
#content {
	position:relative;             
   	padding-bottom:50px;        
	min-height:100%;
} 
 
#footer {
      width:100%;
      height:40px;
      clear:both;
      background-color:#4a1213;
      border-top:solid 1px #505050;
      margin-bottom:0;      
     	position:absolute;    	
	bottom:0;                
} 
 
html, body {
	height:100%;
	margin:0;
	padding:0;
}

Open in new window

0
IShivaAuthor Commented:
I got it to work. For some reason though, I had to take out the padding-bottom:50px; from the #content id. I then had to add:

#newscontainer {
      width:490px;
      float:left;
      padding-bottom: 30px; <--- I added this
}
 
#eventscontainer {
      width:280px;
      float:right;
      color:#fdff9c;
      margin-bottom: 50px; <--- I added this
}

Just adding the bottom margin to #content didn't work. I had to add a bottom margin to #eventscontainer and a bottom padding to #newscontainer.

Not sure why that is but it works! and it validates.

Thanks for sticking around and helpin me out. I appreciate it!

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.