CODEWITHSUNDEEP
cssdynamiccss-floatpositioning
Wottensprels
Wottensprels

Reputation: 3327

Set two floating <div>'s to same height

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?

Upvotes: 1

Views: 5104

Answers (1)

Morpheus
Morpheus

Reputation: 9065

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

Upvotes: 3

Related Questions