不包含嵌套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; 

     }