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 the 1st div slideshow. The margin seems correct, but I want these two divs to appear side-by-side.

I've tried some of the suggestions on 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>

score 2 · Answer 1 · answered Feb 03 '11 at 02:56

2

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/

answered Feb 03 '11 at 02:56

Petah

45,477
28
157
213

I tried that which seems to work, but how can I use the margin also? – Paul Feb 03 '11 at 03:04
Yea thats a pretty cool site. Ok so I settled with position: absolute, able to use the margins, and not use float. – Paul Feb 03 '11 at 03:12
1

@Paul, what wrong with using float? You can still set margins. See: http://www.jsfiddle.net/K64vZ/1/ – Petah Feb 03 '11 at 03:14
Im not familiar enough with Float. It seems that with absolute there is no question, which should work in the major browsers correct? – Paul Feb 03 '11 at 03:27

score 1 · Accepted Answer · answered Feb 03 '11 at 02:54

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.

answered Feb 03 '11 at 02:54

SpliFF

38,186
16
91
120

I tried doing that, which didnt work. slideshow float left and promo floated right. – Paul Feb 03 '11 at 02:56
but did you remove the 569px margin on promo first? – SpliFF Feb 03 '11 at 02:58
So I cant use margins at all with Float? Petah's solution seems to work, but I need to use the margins as well, I think. – Paul Feb 03 '11 at 03:03
position: absolute seems to work, and I can use the margins without float – Paul Feb 03 '11 at 03:10
sure you can use margins but without absolute positioning the margin is relative to the right edge of the left inner div. Therefore a 569px left margin will not fit in the available space so it wraps. – SpliFF Feb 03 '11 at 03:22

score 0 · Answer 3 · answered Feb 17 '13 at 13:53

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.

score 0 · Answer 4 · answered Feb 03 '11 at 02:56

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.

CSS Problem to make 2 divs float side by side

4 Answers4

Linked