Set two floating <div>'s to same height

Question

So i am struggling again with css positioning.

Minutes ago, i figured out that floating elements do not affect the height of their parent-container. So how do i set two div's which are floating to the same height when said height is dynamic?

fiddle

http://jsfiddle.net/qbaJ8/

How do i set the height of the cyan <div> to the same height as the dynamic filled green one?

Answer 1

Add this css:

html, body {
   height: 100%;
}

.start-page-wrapper {
    height: 100%;
}

.first-section {
    height: 100%;
}

Updated jsfiddle

EDIT

Alternatively you can use display: table for parent element and display: table-cell instead of float: left for childs. It will not work in IE7. jsfiddle