[overflow] Why is this inline-block element pushed downward?

Following is my code and I want to understand that why #firstDiv is being pushed downward by all browsers. I really want to understand the inner workings of the fact that why its being pushed downward rather than pulling it upward by one way or another. (and I know how to align their tops :))

And I know that its overflow:hidden which is causing it but not sure that why its pushing that div downward.

_x000D_

body {_x000D_
  width: 350px;_x000D_
  margin: 0px auto;_x000D_
}_x000D_
_x000D_
#container {_x000D_
  border: 15px solid orange;_x000D_
}_x000D_
_x000D_
#firstDiv {_x000D_
  border: 10px solid brown;_x000D_
  display: inline-block;_x000D_
  width: 70px;_x000D_
  overflow: hidden;_x000D_
}_x000D_
_x000D_
#secondDiv {_x000D_
  border: 10px solid skyblue;_x000D_
  float: left;_x000D_
  width: 70px;_x000D_
}_x000D_
_x000D_
#thirdDiv {_x000D_
  display: inline-block;_x000D_
  border: 5px solid yellowgreen;_x000D_
}

_x000D_

<div id="container">_x000D_
  <div id="firstDiv">FIRST</div>_x000D_
  <div id="secondDiv">SECOND</div>_x000D_
  <div id="thirdDiv">THIRD_x000D_
    <br>some more content<br> some more content_x000D_
  </div>_x000D_
</div>

_x000D_

http://jsfiddle.net/WGCyu/.

This question is related to overflow css