問題圍繞我的網站與使用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/