XHTML Question: Best way to make div height 100%?

[1901gt]

Let say, I have this example.

<div id="container">

<div class="contentA left">Lorem lipsum</div>
<div class="contentB right">Lorem lipsum</div>

</div>

.. where left and right is float left and right respectively.

What is the best method (must be validated) to make the container's height 100% or fluid without declaring a fixed height value?

I seems to have some problem with this whenever there is floats inside the div.

Before, I used to use this:

#container {
overflow: auto;
height: 100%;
min-height: 100%;
}

But sometimes, the horizontal and vertical scrollbars will appear inside the div, especially in IE7.

 

[Epic]

Clear the floats. This isn't necessarily the best way to do it, but it works.

<div id="container">

<div class="contentA left">Lorem lipsum</div>
<div class="contentB right">Lorem lipsum</div>

<div style="clear: both;"> </div>
</div>

 

[1901gt]

Ok great! Works well for me.

 

[1901gt]

I think I've found a better way. Silly me.
Just insert the following inside the div and it will auto expand.

#container {
overflow: hidden;
}

:hehe:

 

[Nathan]

That should work, but if I remember correctly that could cause some of the content in the container to get cut off.