问题围绕我的网站与使用div标签的边框

Question

我想要一个div边框来包围我的整个网站，但相反，边框不会动态移动，因为我将元素添加到页面。相反，它只是围绕前两个元素，文本和图像，而不是我的菜单，但如果我删除围绕我的表格的div标签，那么边框将环绕表格。我需要div标签来组织我的网站，所以任何人都可以帮助我...请问这个问题似乎来自content_col1 div标签中的float标签，但我需要float来将div标签放在一起。

继承人的HTML

<div id="content">   
    <div id="content_topTitle"> 
     Welcome to the greatest local online grocery store the world has ever seen! 
    </div> 
    <div id="content_images">    
     <img src="image/image1.jpg" /> 
    </div> 


    <!-- /////////////////////////// --> 
    <!-- /////////////////////////// --> 
    <!-- /////////////////////////// --> 
    <!-- /////////////////////////// --> 

    <div id="content_col1"> 

     <table width = 100% cellpadding = "0" cellspacing = "0"> 
     <tr> 
      <td class = "departments"><a class = "departments" href="">Bakery</a></td> 
     </tr> 
     <tr> 
      <td class = "departments"><a class = "departments" href="">Vegetables</a></td> 
     </tr> 
     <tr> 
      <td class = "departments"><a class = "departments" href="">Sweets</a></td> 
     </tr> 
     <tr> 
      <td class = "departments"><a class = "departments" href="">Meats</a></td> 
     </tr> 
     <tr> 
      <td class = "departments"><a class = "departments" href="">Dairy</a></td> 
     </tr> 
     <tr> 
      <td class = "departments"><a class = "departments" href="">Bakery</a></td> 
     </tr> 
     <tr> 
      <td class = "departments"><a class = "departments" href="">Vegetables</a></td> 
     </tr> 
     <tr> 
      <td class = "departments"><a class = "departments" href="">Sweets</a></td> 
     </tr> 
     </table> 

    </div> 
</div> 

和这里的CSS

#content 
{ 
background: #eee; 
border: 5px solid #68accc; 
padding: 0px; 

} 

#content_topTitle 
{ 
text-align: center; 
height: 35px; 
line-height: 35px; 
font-weight: bold; 
} 

#content_images 
{ 
width:880px;height:200px; 
} 

#content_col1 
{ 
float: left; 
width: 130px; 
padding: 10px; 
} 

Answer 1

来解决这个问题最简单的方法是设置溢出例如像周围的元素：

#content 
{ 
background: #eee; 
border: 5px solid #68accc; 
padding: 0px; 
overflow: hidden; 
} 

See an example here。

Answer 2

一些修复程序是：清除包含表格的div后的浮点数。请参阅js小提琴here

或者在包装器div上应用一个明确的修复类，它负责处理浮动并使内容正常工作。 Js小提琴here.

Answer 3

您需要#content div上的clearfix。

http://css-tricks.com/snippets/css/clear-fix/