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

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.