Problem with 2 Divs appearing side-by-side

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.

The red and purple divs need to appear side-by-side

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>

What do you mean "side by side"? Should they both be aligned to the left, and touching each other? Or do you mean the purple div touching the left edge of the containing box, and the red div touching the right edge? Should the width of the divs be increased? — thirtydot, Feb 28 '11 at 04:51
I mean the purple and the red should be side-by-side, but the red falls below the purple, yea I had to go through and change positions to relative so the other image height would repeat — Paul, Feb 28 '11 at 04:55

score 2 · Answer 1 · answered Feb 28 '11 at 04:52

2

#mid-feature
{
/*margin:350px 0 0 16px;*/
width:800px;
background-color:Olive;  
oveflow:hidden;
}
#mid-featureleft
{
/*margin:350px 0 0 16px;*/
background-color:Purple;
/*height:330px;*/
/*width:532px;*/
width: 300px;
float:left;
/*position:relative;*/
}
#mid-featureright
{
/*height:330px;*/
width:205px;
background: red;
float:right;
}

Try to use the above code. I have removed margin from main div and position from all the style. EDIT: Also added a overflow to the main div. See if it helps

answered Feb 28 '11 at 04:52

codingbbq

4,049
5
35
47

they appear side-by-side but also appear behind the big photo that is above. – Paul Feb 28 '11 at 04:59
so I changed the margin for mid-feature so that this appears below the image. Thanks for your answer! – Paul Feb 28 '11 at 05:06

Jason · Accepted Answer · 2011-02-28T05:05:50.333

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;
}

edited Feb 28 '11 at 05:05

answered Feb 28 '11 at 04:56

Jason

2,687
3
29
40

I think maybe the margins were set in all three divs. I could have swore I tried that, but now at least its close enough. Such drama! I'll repost the code once I get it all straight. – Paul Feb 28 '11 at 05:05

Problem with 2 Divs appearing side-by-side

2 Answers2

Linked