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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

iLLiCiTgrAuthor 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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.