How do I set the height of a floating div in CSS?

Question

I have two floating divs, each is 50% wide, the problem I have is that I can't get them to stretch to the full height of the window. Essentially I want each div to have 50% width and 100% height (but it isn't working)

html

<section>
    <div></div>
</section>
<section>
    <div></div>
</section>

css

section {
    background: black;
    width: 50%; min-height: 100%; height: 100%;
    margin: 0;
    float: left;
}
section > div {
    height: 100%;
}

Answer 1

Assuming that when you talk about 100% height, you're referring to 100% of the view port, in order to use 100% height for an element like a div, you need to have it's container element set to 100% as well... most likely, your body/html tags aren't set to 100%, and that's the reason why wend you set 100% height to your two floating div doesn't seem to work!

Ex:

html, body { width:100%; height:100%; }
div#one { float:left; width:50%; height:100%; }
div#two { float:right; width:50%; height:100%; }

This is a sample CSS code, there's others ways to this with far less code...

Hope it helps!

Answer 2

I think this might help you..

http://www.alistapart.com/articles/fauxcolumns/

It indicates how you can have aligned columns :)