Unknown space between divs

Hi, i am having an issue with my website with an additional space between divs and i dont know where it is coming from. I have done a global whitespace reset at the start of the CSS file and i am stumped.

The space is between the subHeader and the content div, as shown in the pic

The div layout is shown below:

<div id="subHeader"></div>
<div id="content">         
   <div id="mainContent" class="page"></div>
   <div id="sidebar" class="page"></div>
<div id="footer"></div>

The page is part of a wordpress theme:


The CSS is a mess still and i need to clean it up, what i cant work out is how and why this space is coming in. The only thing i can think of is the fact that the two divs mainContent and sidebar are floated.

I have tried tracing this in firebug, but i cant see the space or margin on any of the divs that could account for this.

Really appreciate the help in advance, been head scratching for the past 3 hours and brain has stopped working.



Hi Rayzur, it was indeed… thank you very very much! This has been solved with your advice.



It looks like collapsing margins, try adding either overflow:hidden; or padding-top:1px; to Content.