Explanation on CSS float overflow property

Question

I am a newbie to CSS. I started exploring CSS float property. I have two

elements inside a container. The two divs have equal

Answer 1

What is happening here is because:

.container{
  overflow:hidden;
}

What is happening? Your floating div wants to take up space before your other div. Because your non-floating div has display: block, it wants a whole line to render itself. The floating div is pushing down your non-floating div which is then hidden by the style above. If you change display to inline-block, it will take up only the space it needs using the width and height properties.

Here is an example: http://codepen.io/anon/pen/LVpxZy