Anonymous white space between two divs

Question

Here is the Fiddle,

I have two divs one is for header and the other is for the main body. Inside the div which is for header, i'm having another div and that div was floated left. Due to that floating, a white space has occurred between those two divs (between the div for header and div for main body).

[Note: Please refer #DivLogo in the css section of the fiddle]

My question is, why this kind of problem is raising due to floating.?

Answer 1

It's an artifact of having your #DivHeader be inline-block. Change it to display: block and set overflow: hidden; to contain the floats. See http://jsfiddle.net/jhcUb/