CSS Task to make 2 divs float side by side

Question

I would like the 2 divs that are inside the div container to be displayed side by side. However, the second one for some reason turns around. The 2nd Division Promo is lower and to the right of the 1st slide show. Margin seems correct, but I want these two divs to be displayed side by side.

I tried some of the suggestions here, but they do not work.

Here is the CSS:

#top-feature {
background: red;
height: 320px;
width: 897px;
margin: 11px 0 0 0;
/*padding: 10px 0 0 10px;*/
position: relative;
text-align: left;
}

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

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

Here is the HTML:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div id="top-feature">
        <div id="slideshow">
        </div>
        <div id="promo">
        </div>
    </div>
</asp:Content>

Answer 1

You need to float, embed, or position: the absolute ones are the inner divs, if you want them side by side. A “regular” div is a block object that forces the following content to display below it.

Answer 2

Use the floatcss 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;
}

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

Answer 3

be sure to swim first, or you can 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 content in each div.

Answer 4

In fact, this does not require any special style, this is the default css property.

Two divs will always be side by side until the total width of the two divs is greater than the div of the container or you 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 have not specified any borders, they will be displayed side by side, but if you have specified borders / indents / margins, etc., you should adjust the width of the inner div accordingly.