不包含嵌套div的包裝

Question

http://jsfiddle.net/bobbyfrancisjoseph/2EfLz/1/

以下是我編寫的代碼。問題是，在結果頁面包裝div似乎並不容器嵌套的div。

Answer 1

由於您的身體元素#left-container,#right-container正在浮動，因此它們將從常規內容流中刪除，因此您需要一個「clearfix」來正確包含浮動元素。你可以這樣做有兩種方式：

一，通過使用clearfix，像自直列以下，我的首選方法，並沒有惹可能被溢出了容器的絕對定位的元素：

#wrapper:before, #wrapper:after { 
    content:""; 
    display:table; 
} 

#wrapper:after { 
    clear:both; 
} 

#wrapper { 
    *zoom:1; /* ie7 hasLayout fix */ 
} 

或兩個在您的#wrapper容器使用overflow:hidden，我儘量避免，因爲你可能會遇到的問題可能與positition:absolute溢出的容器進行定位元素的方法，所以他們會切斷與該方法。第三種選擇是在容器的末尾添加一個，但這只是一個噁心的方法:)。

演示與第一（和我的首選）方法http://jsfiddle.net/2EfLz/2/

Answer 2

添加「overflow：hidden;」到你的包裝的定義。

Answer 3

你給溢出：隱藏在#wrapper指定

#wrapper 
{ 
    margin:0 auto; 
    position:relative; 
    background-color:#999; 
    width:960px; 
    border:dashed #006 thick; 
    overflow:hidden; 


} 

http://jsfiddle.net/2EfLz/3/

Answer 4

在包裝風格使用overflow:hidden;。

Answer 5

嘗試這樣的位置是：絕對的;

  #wrapper 
      { 
      margin:0 auto; 
      position: absolute; 
      background-color:#999; 
      width:960px; 
      border:dashed #006 thick; 

     }