This is a wierd one. I have two divs, #header followed by #page.

#header has a bottom margin or 20px, and #page has a top margin of 20px.

I can see in Firebug that both of the margins are overlapping by about 10px. if I set #header's margin to 0px then the layout does not change at all, but if I change it to 30px the rest of the page shifts down a bit further.

If I change #page's margin to 0px it shifts up by 10 pixels, if I change it to 10px, it's in the same position as if it's set to 0px. If I return it back to 20px then it shifts down by 10 pixels!

I'm viewing this in FF but I think it's happening in all major browsers.

I can't get my head around why this is happening, does anybody have any ideas?

Here is a link to the file:
http://www.freshbeat.co.uk/concept/p...ory-result.htm

Thanks to anyone who can help.

So, remove the bottom margin on the header or the top margin on #page, you don't really need both.

Oh yeah, how did I not think of that! Thanks.

It's been a long day