CODEWITHSUNDEEP
css
Paul
Paul

Reputation: 1004

CSS Problem to make 2 divs float side by side

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>

Upvotes: 3

Views: 31853

Answers (4)

RohitG
RohitG

Reputation: 41

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.

Upvotes: 0

BMitch
BMitch

Reputation: 263469

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.

Upvotes: 0

Petah
Petah

Reputation: 46040

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/

Upvotes: 2

SpliFF
SpliFF

Reputation: 38956

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.

Upvotes: 1

Related Questions