Question

I have 2 divs nested within a parent div, and I cant figure out how to get these to appear side-by-side. I’ve tried float:left for the left div, and float:right for the right div but to no avail. Apparently the margins were set in all 3 divs which caused a meltdown.

Here is the corrected CSS:

#mid-feature
{
margin:350px 0 0 16px;
width:848px;
height:318px;
background-color:Olive;
position:relative;
overflow:hidden;  
}
#mid-featureleft
{
height:318px;
width:552px;
background-color:Purple;
float:left;
position:relative;
}
#mid-featureright
{
height:318px;
width:296px;
/*background-color:#B9C1CC;*/
background-color: red;
float:left;
position: relative;
}

Here is the relevent HTML:

<div id="mid-feature">
    <div id="mid-featureleft">
        things<br />
        things<br />
        things<br />
        things<br />
        things<br />
        things<br />
        things<br />
    </div>
    <div id="mid-featureright">
        cosas
        <br />
        cosas
        <br />
        cosas
        <br />
        cosas
        <br />
        cosas
        <br />
        cosas
        <br />
    </div>
</div>            

Answer 1

The problem is if you add up all the margins (left and right) and the widths, you are more than the outer wrap of 800px. try this.

#mid-featureleft
{
background-color:Purple;
height:330px;
width: 300px;
float: left;
}
#mid-featureright
{
height:330px;
width:205px;
background: red;
float:left;
}

Also don’t forget to clear the float after the inner divs

.clear{
  clear: both;
}