I'm trying to fix this css issue that is driving me nuts.
Basically what i have is 3 divs.
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.
font-family:Arial, Helvetica, sans-serif;