CSS Problem to make 2 divs float side by side

Question

I would like 2 divs, which are within a container div, to appear side-by-side. However the second one wraps for some reason. The 2nd div promo is below and to the right th

Answer 1

You need to float, inline or position:absolute those inner divs if you want them side-by-side. A "normal" div is a block object which forces following content to appear below it.

Answer 2

first be sure to float, or you could also use absolute positions:

    #slideshow {
height: 300px;
width: 548px;
margin: 0 0 0 0;
background: blue;
float: left;
}

#promo {
height: 100px;
width: 200px;
margin: 0 0 0 569px;
background: green;
float: left;
}

Then make sure you have some contents in each div.

Answer 3

Actually you don't need any special styling to achieve that, it is by default property of css.

The two divs will always be side by side until the total width of the two divs is not more than the container div or you have explicitly used clear:both; with the first div. Here is an example :

#outerdiv {
    width:500px;
    height:300px;
}
#innerdiv1 {
    width:200px;
    height:300px;
    float:left;
}
#innerdiv2 {
    width:300px;
    height:300px;
}

If you haven't specify any borders, these will be displayed side by side, but if you have specified borders/padding/margins etc. you have to then adjust the width of inner divs accordingly.

Answer 4

Use the float css property

#top-feature {
    background: red;
    height: 320px;
    width: 897px;
}

#top-feature div {
    float: left;
}

#slideshow {
    height: 300px;
    width: 548px;
    background: blue;
}

#promo {
    background: green;
    height: 100px;
    width: 200px;
}

See: http://www.jsfiddle.net/K64vZ/