Why inline block behavior
Your original CSS is as follows:
#DivHeader { position:relative; display:inline-block; width:100%; font-family: Century Gothic, sans-serif; background-color:#3b5998; }
There are two #DivHeader , one of them floats, and one is absolutely positioned and as such does not contribute to the height of #DivHeader .
Suppose you set display: block , you would see a red background, which was written in the upper left corner of the page, and you would not see the title.
This is because you set #DivMain to position: relative , so you created a new stacking context that is drawn on top of previously displayed elements.
If you set position: static to #DivMain , you will see the contents of the header from the floating element.
So, returning to #DivHeader using display: inline-block , the element now recognizes a space in your HTML document, creates an anonymous inline field, which means that #DivHeader now has content. Since there is a space after the float, this means that the clearance resulting from the float contributes to the built-in block, and you see the background color, etc.
Fixing the problem is easy enough, on DivHeader install overflow: auto and display: block .
One more thing, if you did not swim #DivLogo , you would not see the problem, because the larger font size in the logo elements would move the baseline so that the white space recognized by the built-in block would not be the case.
Pretty little here!