Question

I have a main content 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).

Answer 1

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.