Jak sprawić, aby dwa elementy div unoszą się obok siebie?

Question

I starali się uczynić dwie DIV płyną obok siebie (czyli sliderdiv i głównej-Search), ale nie mogę wydawać się stać it.`A skrzypce tego samego: 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; 
} 

proszę o pomoc

Answer 1

Spójrz na: here. Wystarczy umieścić float: left dla obu z nich i usunąć clear: both.

Answer 2

Ci się to

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

Answer 3

dodać overflow:hidden do owijarki do wypełnienia konstrukcji i usunąć clear:both; i trzeba będzie umieścić float:left po prostu pierwszy pozycja nie dla obu:

UPDATED FIDDLE