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;
	
}

Select allOpen in new window

templatebw.jpg
templatebw-wrong.jpg