Footer behind body on bottom

Hello everybody.
I'm trying to fix this css issue that is driving me nuts.
Basically what i have is 3 divs.
Header
MainBody
Footer.
What i want is for the main body to overlap with the footer for some pixels keeping the footer on the bottom of the page (not browser's bottom).
I've attached a two images one with the desired behavior, and one with the footer's unwanted behavior.
setting both the footer and the mainbody on position:relative and giving the footer a top:-53px; i manage to raise it 53 pixels to overlap, but it leaves a 53px pixels gap under the footer. I want to remove that gap

Point to notice:
The mainbody's height differs from page to page so i do not want to use absolute posion and bottom 0 on footer cause it will make the mainbody go over the footer on long pages.

I would also appreciate it if someone points out why on some browser versions the footer goes 100% width but on other's it just has the width of it's contents.

Thanks
body{
	background-image: url(/img/background.jpg);
	min-width:1125px;
	margin:0;
	padding:0;
	width:100%;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
}
#header{
	text-align:left;
	min-width:1125px;
	width:1125px;
	height:147px;
	margin-left:auto;
	margin-right:auto;
	
}
#mainbody{
	text-align:left;
	min-width:1125px;
	width:1125px;
	min-height:612px;
	margin-left:auto;
	margin-right:auto;
	z-index:1;
	position:relative;
}
#footer{
	background-image: url(/img/footer.jpg);
	width:100%;
	z-index:0;
	position:relative;
	top:-53px;
	
}

Open in new window

templatebw.jpg
templatebw-wrong.jpg
iLLiCiTgrAsked:
Who is Participating?
 
iLLiCiTgrConnect With a Mentor Author Commented:
In such an epiphany i had with position absolute, i dared to try this and it works.
Sorry everyone.
Hope this snippet helps someone in the future.
#mainbody{
	text-align:left;
	min-width:1125px;
	width:1125px;
	min-height:612px;
	margin-left:auto;
	margin-right:auto;
	z-index:1;
	position:relative;
	margin-bottom:-56px;
}
#footer{
	background-image: url(/img/footer.jpg);
	width:100%;
	z-index:0;
	position:absolute;
	bottom:0px;
	
}

Open in new window

0
 
iLLiCiTgrAuthor Commented:
Since the code snippet i provided fails on IE, i found another trick to make it work

I Just changed the top:-56px of the footer to margin-top:-56px forcing the mainbody to come to the footer, not the footer to the mainbody.
#mainbody{
	text-align:left;
	min-width:1125px;
	width:1125px;
	min-height:612px;
	margin-left:auto;
	margin-right:auto;
	z-index:1;
	position:relative;

}
#footer{
	background-image: url(/img/footer.jpg);
	width:100%;
	z-index:0;
	position:relative;
	margin-top:-56px;
}

Open in new window

0
All Courses

From novice to tech pro — start learning today.