Footer sticking to bottom of page

Hello, I'm using CSS Sculpture 3 and am using a template with a full width header and a left handed column. I'm working on a site that provides support for blind people who want to use the net. I want a full width footer that sticks to the bottom of the page and I've followed several tutorials and can't seem to find the problem. In IE (version 8) the footer climbs up the page when viewed in a smaller browser window. The site is located at www.attacs.net and currently I have no footer on the page. I want a full width header and a full width footer. I am including the page where I essentially created a div outside of the containing divs and I've applied overflow, positioning, negative margins, etc. Nothing seems to work. Any help would be greatly appreciated. This is a nonprofit work and I can't afford to submit a ticket! Thanks

You can accomplish this directly in CSS SCulptor.

If you click the button to edit the css, on the layout tab, set the select list next to footer to Fixed.


this will set the footer to be fixed to the bottom of the page.

Hi, When I set the footer to fixed it disappears completely.

do you have a link where i can see this?

the link form your initial post does not have a footer in the template.

Hi,

I put it on my testing server

services.htm

In IE 8 the footer climbs up to the middle of the page on small windows as the user is blind this creates some issues. Your help is greatly appreciated. I've tried using negative margins on the outerWrapper div I've read "Sticky Footer" at stickyfootercss.com I am just missing something here. I just need to make sure the footer is pushed to the bottom of the content.

again thanks

youre causing the problem by setting a 100% height on the body tag in the css/basic.css file:


html, body, #outerWrapper, #contentWrapper {
height:100%;
min-height: 100%;
position:relative;
};

body > #outerWrapper {
position:relative;
height: 100%;
}



you want the outer wrapper and content wrapper to have 100% height, but not the body tag, this is what pushes the footer up the page.

Hey, thanks much for your help. I appreciate it and it worked great.

you're welcome.

I am having the same problem with my site www.soc.mil on the contact page but the body is not set at 100%. Also, I am not seeing the top or bottom borders on my page.

in CSSSculptor/2ColumnFixedLeftSidebarHeaderandFooter_SOCMILinsidepages_css/screen.css


change:

#outerWrapper #contentWrapper {
	background-image: url("../2ColumnFixedLeftSidebarHeaderandFooter_SOCMILinsidepages_images/contentWrapper_bg.png");
	background-repeat: repeat-y;
	color: #3d3d3d;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: 14px;
	overflow: visible;
}

to:

#outerWrapper #contentWrapper {
	background-image: url("../2ColumnFixedLeftSidebarHeaderandFooter_SOCMILinsidepages_images/contentWrapper_bg.png");
	background-repeat: repeat-y;
	color: #3d3d3d;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: 14px;
	overflow: hidden;
}