How to make two divs float side by side?

Question

I have been trying to make two divs float side by side (namely sliderdiv and main-search) but cant seem to get it.`A fiddle of the same: http://jsfiddle.net/Ar99F/1/

Mark-up

<div id="homecontent" class="container">
    <div id="homecontent-mid" class="row rounded">
        <div id="homebanner" class="rounded">
            <div class="sliderdiv">Content Goes Here</div>
            <div class="main-search">Search Content Goes Here</div>
        </div>
    </div>
</div>

CSS

#homecontent {
    background: url("images/content-bg.png") repeat-x scroll 0 0 #FAFAFA;
    position: relative;
}

#homecontent-mid {
    background: url("images/bg-stage.png") repeat-y scroll right top #FFFFFF;
    border: 1px solid #BDBCBD;
    min-height: 100%;
    outline: medium none;
    top: -40px;
}

#homebanner {
    background: url("images/bg-stage-shade.png") repeat-x scroll 0 0 transparent;
    padding-right: 20px;
    position: relative;
}

.rounded {
    border-radius: 10px 10px 10px 10px;
}

.sliderdiv {
    background: none repeat scroll 0 0 red;
    float: right;
}

.main-search {
    background: none repeat scroll 0 0 #FFFFFF;
    border: medium solid #D51386;
    clear: both;
    float: left;
    overflow: hidden;
    padding: 20px 10px;
}

Please Help

http://stackoverflow.com/questions/2716955/css-layout-aligning-two-divs-side-by-side — schlagi123, Aug 30 '13 at 11:35

score 17 · Accepted Answer · edited Feb 12 '15 at 07:36

17

Have a look here. Just put float: left to both of them and remove the clear: both.

edited Feb 12 '15 at 07:36

Rigel1121

2,022
1
17
24

answered Aug 30 '13 at 11:35

adarshr

61,315
23
138
167

3

Note that the container is still collapsed, add `overflow: hidden;` to `#homecontent` as well - http://jsfiddle.net/Ar99F/5/ – Adrift Aug 30 '13 at 11:37

score 2 · Answer 2 · answered Aug 30 '13 at 11:44

2

add overflow:hidden to your wrappers to fulfill the design and remove clear:both; and you will need to put float:left to just the first item not to both

UPDATED FIDDLE

answered Aug 30 '13 at 11:44

RbG

3,181
3
32
43

score 0 · Answer 3 · answered Aug 30 '13 at 11:40

Like this

DEMO

CSS

#homecontent {
    background: url("images/content-bg.png") repeat-x scroll 0 0 #FAFAFA;
    position: relative;
}
#homecontent-mid {
    background: url("images/bg-stage.png") repeat-y scroll right top #FFFFFF;
    border: 1px solid #BDBCBD;
    min-height: 100%;
    outline: medium none;
    top: -40px; 
    display:table;
}
#homebanner {
    background: url("images/bg-stage-shade.png") repeat-x scroll 0 0 transparent;
    padding-right: 20px;
    position: relative;

}
.rounded {
    border-radius: 10px 10px 10px 10px;
}
.sliderdiv {
    background: none repeat scroll 0 0 red;

    display:table-cell;
}
.main-search {
    background: none repeat scroll 0 0 #FFFFFF;
    border: medium solid #D51386;
    clear: both;
    display:table-cell;
    overflow: hidden;
    padding: 20px 10px;
}

How to make two divs float side by side?

3 Answers3

Linked