проблема, окружающая мой сайт границей с использованием тегов div

Question

Я хочу, чтобы граница div окружала весь мой веб-сайт, но вместо этого граница не движется динамически, когда я добавляю элементы на страницу. Вместо этого он просто окружает первые 2 элемента, текст и изображение, но не мое табличное меню, но если я удалю тег div, окружающий мою таблицу, то граница будет окружать таблицу. Мне нужны теги div для организации моего сайта, хотя кто-нибудь может мне помочь, пожалуйста ... Проблема, похоже, связана с тегом float в теге div content_col1, но мне нужно 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

Некоторые исправления: Очистите поплавок после div, который содержит таблицу.См. Js fiddle здесь

Или примените класс clear fix к div-элементу-обертке, который заботится о float и заставляет контент работать.Js fiddle здесь.

Answer 2

Вам необходимо внести ясность в #content div.

http://css -tricks.com / сниппеты / CSS / ясно затруднительного /

Answer 3

Самый простой способ решить проблему - установить переполнение окружающего элемента, например:

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

См. Пример здесь .