[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Sticking footer to bottom of viewport

Posted on 2008-02-01
10
Medium Priority
?
1,160 Views
Last Modified: 2013-11-19
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

0
Comment
Question by:IShiva
  • 6
  • 4
10 Comments
 

Author Comment

by:IShiva
ID: 20798088
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
 
LVL 28

Accepted Solution

by:
TName earned 2000 total points
ID: 20812307
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
 

Author Closing Comment

by:IShiva
ID: 31427191
PERFECT! Thanks so much!
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 

Author Comment

by:IShiva
ID: 20814961
TName:

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

IShiva
0
 

Author Comment

by:IShiva
ID: 20815326
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
 
LVL 28

Expert Comment

by:TName
ID: 20815723
>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
 

Author Comment

by:IShiva
ID: 20815969
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
 
LVL 28

Expert Comment

by:TName
ID: 20819244
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
 
LVL 28

Expert Comment

by:TName
ID: 20819257
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
 

Author Comment

by:IShiva
ID: 20822860
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

607 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