Positioning Div at the bottom of the screen when scrolling

Hi,

im making a site that will position a div as a footer at the bottom of the browser window, and will appear over content as it is shown behind, that then scrolls down the screen with the page. remaining in the same position on the bottom of the window.

a simple example is : http://www.thirty1.org/test.html

This works fine in firefox, and does the job i desire, but in iexplorer it positions the div at the bottom of the window when loads, but leaves it there even when scrolling

#footer {
	background: #702618;
	height:15px;
	width: 100%;
	position:fixed;
	_position:absolute;
	bottom:0px;
}

#content {
	width:500px;
}

Code (markup):

any suggestions?

Thanks

Tom

 

Have a look at: http://www.cssplay.co.uk/layouts/fixed.html
It must be useful.

 

thanks for the link maujor, it works for the example but when i try to implement it into my site nothing changes

heres my css from the site

edit 1: ok after some testing, ive fuond that the problem is the code used to center the page, is there any other way of doing it, both using -400 left margin and left 50%, and auto margins cause the problem

edit 2: turns out the overuse of position:absolute is to blame, is there another way around the positioning on the bottom without changing how absolute works?

body {
	height:100%; 
	overflow-y:auto;
	font-family: trebuchet ms, verdana, Helvetica, sans-serif;
	font-size: 10px;
	color: #333333;
	background:url(../images/misc_bg.jpg) repeat-y 50% 0;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

* html #footer {
	position:absolute;
}

* html #bottom {
	position:absolute;
}

img { 
	border: 0px solid white; 
}

a {
	color:#333333;
}

a:hover {
	color:#702618;
}

#container {
	padding: 0px;
	width: 800px;
	text-align: left;
	position: absolute;
	left: 50%;
	margin-left: -400px;
}
		
#intro { 
	min-width: 800px;
}
	
#logo{
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	padding: 0px;
	width: 171px;
	height: 551px;
	background: url(../images/misc_menubg1.jpg);
	float:left;
}
	
#pageHeader { 
	width: 800px;
	height: 152px;
	float: left;
}

#bodycontainer {
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	padding: 0px;
	width: 628px;
	height: 551px;
	left:85px;
	float: left;
	background:url(../images/misc_bgpic1.jpg) no-repeat;
}
	
#preamble {
	top: 146px;
	width: 225px;
	left: 200px;
	position:absolute;
	font-family: trebuchet ms, verdana, Helvetica, sans-serif;
	line-height:1.5;
	font-size:12px;
	color:#333333;
	margin-bottom:50px;
	padding-bottom:50px;
}

#footer {
	width:800px;
	height:45px;
	background:url(../images/misc_bgpic2.jpg);
	padding:0px;
	position:fixed;
	_position:absolute;
	bottom:0px;
	left: 50%;
	margin-left: -400px;
}

#bottom {
	margin:0 auto;
	background-color: #702618;
	height:15px;
	padding: 0px;
	width: 800px;
	position:fixed;
	_position:absolute;
	bottom:0px;
	left: 50%;
	margin-left: -400px;
}

#language {
	right: 2px;
	top: 33px;
	width: 115px;
	height: 15px;
	position:absolute;
}

#accountmenu {
	right: 0px;
	top: 50px;
	width: 262px;
	height: 15px;
	position:absolute;
	font-family: trebuchet ms, verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
}

#footermenu {
	position:absolute;
	top:10px;
	width: 235px;
	left: 198px;
	font-family: trebuchet ms, verdana, Helvetica, sans-serif;
	font-size: 10px;
	color:#666666;
}

#footermenu a {
	color:#666666;
}

#footermenu a:hover {
	color:#702618;
}

#choobacuppic {
	left:431px;
	top:100px;
	height:350px;
	position:absolute;
}

#thisischooba {
	left:197px;
	position:absolute;
	top:99px;
}

#callchooba {
	right:139px;
	position:absolute;
	top:31px;
}

#choobalogo {
	top:20px;
	left:41px;
	position:absolute;
}

#bubbles {
	margin:0 auto;
	padding: 0px;
	width: 105px;
	text-align: center;
	position:fixed;
	_position:absolute;
	bottom:0px;
	float:inherit;
	right: 50%;
	margin-right: -400px;
}

Code (markup):

thanks for the help

 

in your #bottom div try changing this...
bottom:0px;

to this...
bottom:0;

and see if that helps

 

nope, still the same problem, loads at the bottom of the window, but doesnt move when scrolling

thanks though, any helps appreciated

 

try making position:absolute; instead fixed in the #footer div maybe?