Need help with Sticky Footer

[justshandi]

See: http://www.wildscienceexplorers.org/test.html

I just cannot seem to get my footer working the way I want it to. I have tried all different kinds (but similar) of code from various tutorials. I need to get the brown footer color to extend (wrap right?) left and right to the edges of the window, and I need to get it so that my footer doesn't cover my content when the window is resized. Please help. Thanks!!

[Paul O'B]

Hi,

Your page bottom and pagetop elements are absolutely placed and therefore the footer can never account for them. Put them back in the flow, clear the floats on the wrap, remove the width from the body and use #wrap and then it will be good to go.

Here are the changes:

 @charset "UTF-8";
/* CSS Document */

body {
	background-image: url(http://www.wildscienceexplorers.org/images/Wild_Science_Explorers.jpg);
	background-repeat: repeat-x;
	background-position: center top;
	/*width: 950px;*/
	min-width:950px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	background-position: center top;
}
#pagetop {
	width: 950px;
	height: 430px;
}
#column2 {
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	height: 100%;
	position: absolute;
}
.logohome {
	height: 204px;
	width: 336px;
	background-image: url(http://www.wildscienceexplorers.org/images/logo.png);
	float: left;
}
.logohome a:hover { background-position: 0 -204px; }
.logohome a:active { background-position: 0 -408px; }
#navbox {
	height: 39px;
	width: 582px;
	margin-left: 360px;
	margin-top: 21px;
}
#nav {
	height: 39px;
	width: 582px;
	display: inline;
	z-index: -3;
}
.home {
	height: 39px;
	width: 86px;
	background-image: url(http://www.wildscienceexplorers.org/images/home.jpg);
}
.home a:hover { background-position: 0 -39px; }
.home a:active { background-position: 0 -78px; }
.staff {
	height: 39px;
	width: 77px;
	display: block;
	background-image: url(http://www.wildscienceexplorers.org/images/staff.jpg);
	float: left;
}
.staff a:hover { background-position: 0 -39px; }
.getinvolved {
	height: 39px;
	width: 160px;
	float: left;
	display: block;
	background-image: url(http://www.wildscienceexplorers.org/images/gi.jpg);
}
.getinvolved a:hover { background-position: 0 -39px; }
.partners {
	height: 39px;
	width: 115px;
	float: left;
	display: block;
	background-image: url(http://www.wildscienceexplorers.org/images/partners.jpg);
}
.partners a:hover { background-position: 0 -39px; }
.partners a:active { background-position: 0 -78px; }
.contactus {
	height: 39px;
	width: 144px;
	float: left;
	display: block;
	background-image: url(http://www.wildscienceexplorers.org/images/contactus.jpg);
}
.contactus a:hover { background-position: 0 -39px; }
.contactus a:active { background-position: 0 -78px; }
/* Dropdown Menu */

#nav li {
	list-style-type: none;
	float: left;
}
#nav ul {
	float: left;
	margin: 0px;
	padding-left: 0px;
	display: block;
	position:absolute;
	left:-9999px;
}
#nav ul a {
	white-space:nowrap;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color: #FFF;
	text-decoration: none;
	background-color: #385FAA;
	display: block;
	vertical-align: middle;
	padding-top: 7px;
	padding-right: 15px;
	padding-bottom: 7px;
	padding-left: 15px;
}
.getinvolved ul a { width:130px; }
#nav ul a:hover { background-color: #4370ca; }
#nav ul a:active { background-color: #1A4DB8; }
#nav ul li {
	padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
}
#nav li:hover ul { /* Display the dropdown on hover */
	left:0px;
	position:relative; /* Bring back on-screen when needed */
}
#nav li:hover a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */ background-position: 0 -39px; }
#nav li:hover ul a { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */ text-decoration:none; }
/* Dropdown Menu */

#bigbuttons {
	height: 191px;
	width: 247px;
	position:absolute;
	top: 238px;
	left: 0px;
}
.blog {
	height: 65px;
	width: 247px;
	background-image: url(http://www.wildscienceexplorers.org/images/blog.png);
	float: left;
	display: block;
}
.blog a:hover { background-position: 0 -65px; }
.blog a:active { background-position: 0 -130px; }
.facebook {
	height: 65px;
	width: 247px;
	background-image: url(http://www.wildscienceexplorers.org/images/facebook.png);
	float: left;
	display: block;
}
.facebook a:hover { background-position: 0 -65px; }
.facebook a:active { background-position: 0 -130px; }
.donate {
	height: 61px;
	width: 247px;
	background-image: url(http://www.wildscienceexplorers.org/images/donate.png);
	float: left;
	display: block;
}
.donate a:hover { background-position: 0 -61px; }
.donate a:active { background-position: 0 -122px; }
/* slides */
#slider_container_3 {
	width: 635px;
	heigt:370;
	z-index: -1;
	position:absolute;
	left:286px;
	height: 340px;
	background-color: #FFF;
	padding: 12px;
}
.shadow {
	-moz-box-shadow: 3px 3px 10px #000;
	-webkit-box-shadow: 3px 3px 10px #000;
	box-shadow: 3px 3px 10px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
.slidername_3 {
	width: 634px;
	height: 340px;
	position:absolute;
	display: block;
	float: left;
	overflow:hidden;
}
/* slides */

#png1 {
	height: 84px;
	background-image: url(http://www.wildscienceexplorers.org/images/png1.png);
	width: 201px;
	position:absolute;
	left: 298px;
	top: 330px;
}
#png2 {
	height: 84px;
	background-image: url(http://www.wildscienceexplorers.org/images/png2.png);
	width: 201px;
	position:absolute;
	left: 733px;
	top: 72px;
}
#leftcolumn {
	width:269px;
	float: left;
}
#sticky {
	background-image: url(http://www.wildscienceexplorers.org/images/sticky.png);
	background-repeat: no-repeat;
	width: 269px;
	margin-top: 44px;
}
p {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color: #999;
	padding-right: 25px;
	padding-left: 25px;
	font-size: 18px;
	margin-top: 1px;
}
p a {
	color:#77B61A;
	text-decoration: none;
}
p a:hover { color:#690; }
p a:active { color:#55688d; }
#content p {
	padding-right: 40px;
	padding-left: 45px;
}
h1 {
	font-family: "Comic Sans MS", cursive;
	color: #1A4DB8;
	font-size: 18pt;
	padding-right: 25px;
	padding-left: 25px;
}
#content h1 {
	padding-right: 30px;
	padding-left: 30px;
}
h2 {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color: #F7941D;
	font-size: 14pt;
	font-weight: normal;
	padding-right: 25px;
	padding-left: 25px;
	margin-bottom: 0px;
}
#sticky p { padding-right: 40px;  padding-left:
}
#sticky h1 { padding-top: 20px; }
#pagebottom {
	width: 950px;
	float: left;
}
#content {
	width: 664px;
	background-image: url(http://www.wildscienceexplorers.org/images/graph.png);
	float: right;
	background-repeat:repeat-y;
}
#papertop {
	background-image: url(http://www.wildscienceexplorers.org/images/papertop.png);
	background-repeat: no-repeat;
	height: 44px;
	width: 664px;
	float: right;
}
#paperbottom {
	background-image: url(http://www.wildscienceexplorers.org/images/paperbottom.png);
	background-repeat: no-repeat;
	height: 12px;
	width: 664px;
	float: right;
}
#wse {
	width: 244px;
	height: 61px;
	background-image: url(http://www.wildscienceexplorers.org/images/wse.jpg);
	bottom: 112px;
	position: absolute;
}
html, body { height: 100%; }
#wrap {
	min-height: 100%;
	clear:both;
	width:950px;
	margin:auto;
	position:relative;	
}
#pagebottom {
	overflow:auto;
	padding-bottom: 100px;
}  /* must be same height as the footer */
#footer {
	position: relative;
	margin-top: -100px; /* negative value of footer height */
	height: 100px;
	clear:both;
	background-color: #48362C;
}
#footer p {
	color: #FFF;
	text-align: center;
	padding-top: 40px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}
#wrap:after {
	clear:both;
	display:block;
	height:1%;
	content:" ";
}
#footer p a { color:#5e98d2; }
#footer p a:hover { color:#4276B8; }

[justshandi]

Thanks a ton, Paul!! You made my day. I just have a couple other glitches now that I used your changes. At the very top of the page, there is a space. The paper with the logo on it should touch the very top. How do I get rid of that space? The footer is still acting just a bit weird... when I drag the height of the window around, it never shows the full height of the footer unless I scroll down (does that make sense?). When you have a few, can you take another look for me? Thanks!!!

[RyanReese]

Hello . You are running into what is known as collapsing margins. Basically on "#navbox" you have a top margin of 21px set. That's going through the parents #pagetop and #wrapper, to push off the body. You can fix this by giving the parent either a border or padding. So you have two options.

1) Remove the top margin on #navbox.
2) Set a 1px top padding (or 1px top border) on the parent, #pagetop.

[Paul O'B]

Third option just use padding-top on #navbox

#navbox {
	height: 39px;
	width: 582px;
	margin-left: 360px;
	padding-top: 21px;
}

As Ryan said its margin-collapse and the 21px margin-top collapse onto the main parent (#wrap) and drags that down the page making it 100% + 21px tall.

[justshandi]

Thanks! A couple more things when you have a few. In Firefox and Opera, there is a pretty big white gap between the bottom of my content (graph paper) and the footer. Is there any way to get rid of that? Don't know how this looks in IE because I don't have it. Also, is there any way that I can get the Wilderness Science Education, Inc. logo in the left column to line up with the bottom of the graph paper no matter how long the content is or would that just be a pain?

[Paul O'B]

HI,


The problem is that the clear:both on the footer effectively clears the content including the negative margin so browsers like Firefox don't need the 100px padding bottom. However all versions of IE do need the padding bottom. That's why I prefer the margin-top method on the page wrapper as shown in the css sticky footer faq as it avoids this issue altogether.

You can either give only IE (via conditional comments) the 100px padding bottom on #pagebottom. Or convert the footer into the top soak up approache.

e.g.

#wrap{margin-top:-100px}
#pagetop{border-top:100px solid #000}
#footer{margin:0}
#pagebottom{padding-bottom:0}
#png2{top:172px}
#png1{top:429px}

The above code modifies the existing code and so should follow at the end or be integrated properly.

You can place your logo at position:absolute and then bottom:20px (or thereabouts). Just add some padding-bottom to the element immediately above it to preserve the space. You already have position:relative on the wrap so it should work straight away.

[justshandi]

Hey Paul... Thanks again for all your help. I am a self taught graphic designer, and I have started trying to learn more about web design, too. There is definitely lots to know about it. I know a decent amount about html and css, but I don't know anything about javascript or other languages. Are there any good books or anything you could suggest to me, or is reading forums as good as anything to learn?

I set up the logo the way that you said, and it follows the footer if you drag the page taller. Is that the only way to set it up? I was hoping to keep it lined up with the bottom of the content even if the footer was dragged down by resizing the height of the window. It's probably not a big deal on most people's screens as their windows will be small enough to not have that problem. I've got an iMac 27", so my windows are always pretty big.

[Paul O'B]

Hey Paul... Thanks again for all your help. I am a self taught graphic designer, and I have started trying to learn more about web design, too. There is definitely lots to know about it. I know a decent amount about html and css, but I don't know anything about javascript or other languages. Are there any good books or anything you could suggest to me, or is reading forums as good as anything to learn?

The questions of books is often asked and the answers are often subjective but if you do a search of the relevant forums you will find quite a lot of threads with suggestions for books and should give you the information you need. In the end its probably best to have a range of books from tutorials to manuals so that you can be shown "how" and then learn "why".

I set up the logo the way that you said, and it follows the footer if you drag the page taller. Is that the only way to set it up? I was hoping to keep it lined up with the bottom of the content even if the footer was dragged down by resizing the height of the window. It's probably not a big deal on most people's screens as their windows will be small enough to not have that problem. I've got an iMac 27", so my windows are always pretty big.

Ah ok, I assumed you meant you wanted it near the footer. Putting the logo level with the text will be more awkward for a couple of reasons. Firstly, the text may not always be longer than the left column so if you have the logo level then it will overlap the text in that left column. CSS isn't conditional and can't make decisions like that so for a fully automatic solution you would need scripting.

You could make sure that the text has a min-height that will always be longer than your left column (although that's a fragile concept because you may change the left content column at some time). Then you would put your logo after the text in the middle column and then make it position:absolute; and drag it into the left column with a negative left and top margin.