I have been working on this for literally hours, so I thought some fresh eyes could solve my problem. I have a footer div that I want at the very bottom of my page (which is always 100%). I have a complex page with a lot of images so to get the footer like I needed, I had to add a lot of containers to make everything work. Anyway, when I put text in the div it works just like I want. But, when I remove the text, the div dissappers. The div has a height and a width, so I'm stumped. Oh, and its in IE and FF, so I must be doing something wrong.

I removed all my images and some code to make it easier to see.

http://ratchetmedia.com/dev/index.htm < footer div shows up
http://ratchetmedia.com/dev/index2.htm < footer div is gone (just took out the text)

Here's my style.css page:

html,
body{
	margin:0;
	padding:0;
	height:100%;
}

#container {
	min-height:100%;
	position:relative;
	background:lightblue;
}

	
#main{
	width:980px;
	margin:0 auto;
	padding-bottom:25px;
}

#header{
	width:978px;
	height:106px;
	position:relative;
	z-index:100;
	background:lightgreen;
}

.page{
	width:980px;
	float:left;
}

#footcontainer{
	position:absolute;
	bottom:0;
	margin:0px auto;
	padding:0;
	height:25;
	width:100%;
}

#footer{
	bottom:0;
	margin:0px auto;
	padding:0;
	width:980px;
	height:25;
	background:gray;
}

Thanks!

you are missing the px in the css

#footer{
bottom:0;
margin:0px auto;
padding:0;
width:980px;
height:25;
background:gray;
}

Try this

#footer{
bottom:0;
margin:0px auto;
padding:0;
width:980px;
height:25px;
min-height:25px; (optional)
background:gray;
}

Wow went over that line by line no telling how many times and never caught that. That fixed it. Thanks!