Làm thế nào để làm cho hai div nổi bên cạnh?

Question

Tôi đã cố gắng để làm cho hai divs nổi cạnh nhau (cụ thể là sliderdiv và chính-search) nhưng không thể dường như để có được it.`A fiddle cùng: 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; 
} 

Xin vui lòng giúp

Answer 1

Có giao diện here. Chỉ cần đặt float: left cho cả hai người trong số họ và xóa clear: both.

Answer 2

Giống như

DEMO

CSS này

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

Answer 3

thêm overflow:hidden để wrappers của bạn để hoàn thành việc thiết kế và loại bỏ clear:both; và bạn sẽ cần phải đặt float:left chỉ là người đầu tiên mục không cho cả hai

UPDATED FIDDLE