How to make two divs swim side by side?

Question

I am trying to make two divs float side by side (namely sliderdiv and main-search), but can not seem to get it. "Violin of the same: http://jsfiddle.net/Ar99F/1/

Markup

<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

Answer 1

Take a look here . Just put float: left in both of them and remove clear: both .

Answer 2

add overflow:hidden to your wrappers to complete the design and remove clear:both; , and you will need to put float:left only in the first element, not for both

UPDATED FIDDLE

Answer 3

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; }