How do I get two side by side divs displayed correctly inside a bordered, dynamic height content area?

I have a main conten开发者_如何学Ct area div that has a border. Inside this area I want to have 2 columns side by side. Right now my html/css looks like

<div id="main-area">
    <div class="left-subcontent">left content</div>
    <div class="right-subconent">right content</div>
</div>

#main-area 
{
    margin-left: 160px;
    border-left: solid;
    border-bottom: solid;
    border-right: solid;
    min-height: 250px;
    padding: 15px;
    border-color: #C9C299;
}

.left-subcontent { float: left; width: 200px; }
.right-subcontent { float: left; width: 200px; }

The problem is that with these both floated left, if the content in either left or right areas are longer than 250 pixels, than the main area's border flows in the middle of these content areas (and I have a feeling if I add a footer that will flow inside of these divs too). What I need is that the main area's border is around all the content inside.

Does anyone have any idea how I can accomplish the border around 2 dynamic sized columns (either of which can have more content than the other).

You will have to add a float termination div:

<div id="main-area">
    <div class="left-subcontent">left content</div>
    <div class="right-subconent">right content</div>
    <div class="clear"></div>
</div>

#main-area 
{
    margin-left: 160px;
    border-left: solid;
    border-bottom: solid;
    border-right: solid;
    min-height: 250px;
    padding: 15px;
    border-color: #C9C299;
}

.left-subcontent { float: left; width: 200px; }
.right-subcontent { float: left; width: 200px; }
.clear { clear: both; }

This will do it.

You could try an overflow: auto on your main div, this should make it expand to fit the content divs.