使用div标签用边框包围我的网站时出现问题

Question

I want a div border to surround my entire website but instead the border is not moving dynamically as i add elements to the page. Instead it just surrounds the first 2 elements, the text and the image but not my tabled menu, but if i delete the div tag surrounding my table then the border will surround the table. I need the div tags to organise my site though so can anyone help me please... The problem seems to come from the float tag in the content_col1 div tag but i need float to place div tags next to each other.

Heres the 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>

and here's the 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

The easiest way to solve the problem is to set the overflow on the surrounding element like for example:

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

See an example here .

Answer 2

Some fixes are: Clear the float after the div that contains the table. See js fiddle here

Or apply a clear fix class on the wrapper div which takes care of the float and makes the content work. Js fiddle here.

Answer 3

You need a clearfix on the #content div.

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