兩個並列的div

Question

基本上，我試圖並排獲取兩個div，下面是我正在嘗試做的佈局。

<div id="content"> 
    <div id="search"> 

    </div> 
    <div id="results"> 
     <h2>Waiting!</h2> 
    </div> 
</div> 

下面是其中定位這些div他們並肩而完全推到頁面的左側時，我想他們中心的CSS。

#content { 

} 
#search { 
    float: left; 
    width:​ 400px; 
    height: 350px; 
    margin: 10px auto; 
    overflow: auto; 

    -moz-box-shadow:​​ #555 0 0 8px; 
    -webkit-box-shadow: #555 0 0 8px; 
    -o-box-shadow: #555 0 0 8px; 
    box-shadow: #555 0 0 8px; 
} 

#results { 
    float: left; 
    width: 400px; 
    height: 350px; 
    margin: 10px auto; 
    overflow: auto; 

    -moz-box-shadow: #555 0 0 8px; 
    -webkit-box-shadow: #555 0 0 8px; 
    -o-box-shadow: #555 0 0 8px; 
    box-shadow: #555 0 0 8px; 
} 

Answer 1

你必須將包裝div居中放置它們的中心。嘗試住在這裏http://jsfiddle.net/dAVub/

#content { 
    width:800px; 
    margin: 0 auto; 
}  

Answer 2

有這樣做的方法很多，但最重要的是，你應該在你的容器設置overflow適當的時候你的內在因素浮動。例如，您可以將您的CSS完全替換爲：

#content { 
    overflow:hidden; /* or auto, or visible */ 
    width:820px; 
    margin-left:auto; /* not necessary by default */ 
    margin-right:auto; /* not necessary by default */ 
} 

#content > div { 
    float:left; 
    margin: 10px auto; 
    -moz-box-shadow:#555 0 0 8px; 
    -webkit-box-shadow:#555 0 0 8px; 
    -o-box-shadow:#555 0 0 8px; 
    box-shadow:#555 0 0 8px; 
} 

Answer 3

您可以使用margin：0 auto將容器區域居中。試試這個 -

#content{ margin: 0 auto; width: 90%; } 

這可能有幫助。

Answer 4

添加到您的CSS

#content { 
text-align:center;} 

在#search和#results

Demo