CSS layout question - height of outer DIV

Question

Hopefully this is a quick one - In the past I've used CSS for the main layout of a page, but still used tables within a DIV. But I'm trying to be good and used DIVs there too.
Anyway - I have a basic example here:
http://www.learners-guide.co.uk/lessons/cockpit-drill/layout.php
With the row in the main content split into two columns, using:
#outerWrapper #contentWrapper #content #row_one {
          width:580px;
          border:2px solid #333;
          background-color:#99FF99;
          padding:10px;
#outerWrapper #contentWrapper #content #row_one #row_one_left {
            width: 288px;
          height:auto;
          padding:0px;
          float:left;
          margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
#outerWrapper #contentWrapper #content #row_one #row_one_right {
            width: 288px;
          height:auto;
          padding:0px;
          float:right;
          margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
The problem is that the #row_one_left and #row_one_right colums spill out of the containing #row_one DIV.
How would I make the containing DIV expand to contain the columns? I can do it by specifying a height of the #row_one DIV, but assume this is bad form, and would produce varying results depending on screen / resolution / browser etc.
I thought maybe using height: auto; but no joy with that either.
I'm assuming it must be possible, as it seems a fairly basic layout requiement.
Thanks.

Answer 1

You have to use some style that forces that div to clear the floats (since floated elements are removed from the flow, containing elements act as if they aren't even there).  To do that, something like "overflow:hidden" works wonderfully well.  So remove the height:auto styles (which is the default anyhow), and change this -
#outerWrapper #contentWrapper #content #row_one {
          width:580px;
          border:2px solid #333;
          background-color:#99FF99;
          padding:10px;
to this -
#outerWrapper #contentWrapper #content #row_one {
          width:580px;
          border:2px solid #333;
          background-color:#99FF99;
          padding:10px;
          overflow:hidden;