我需要帮助让我的内容 div 容器环绕两个内部 div！

Question

我正在学习如何将 div 用于我制作的布局，我可能采用了错误的方法，但到目前为止我尝试过的方法并没有奏效。所以我在过去的 2 个小时里用谷歌搜索并测试了各种代码，但我似乎无法正确完成。

这是我的 CSS：

@charset "UTF-8";
/* CSS Document */

* {
margin: 0;
}
html{
height: 100%;
}
body {
background-color: #FFF;
background-image: url(images/bckgndPattern.gif);
background-repeat: repeat;
height:100%;
}
h2 {
color:#cccccc;
letter-spacing:4px;
}
#container_shadow {
background-image: url(images/containerShadow.png);
background-repeat: repeat-y;
height: 100%;
width: 920px;
margin-right: auto;
margin-left: auto;
}
#container {
height: 100%;
width: 900px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
}
#navbar_shadow_top {
background-color: #FFF;
height: 10px;
width: 888px;
}
#navbar {
background-color: #FFF;
height: 50px;
width: 888px;
}
#navbar_shadow_bot {
background-color: #FFF;
height: 10px;
width: 888px;
}
#container_inner {
height: 100%;
width: 888px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
border-right-width: medium;
border-left-width: medium;
border-top-style: none;
border-right-style: dashed;
border-bottom-style: none;
border-left-style: dashed;
border-top-color: #c8c8c8;
border-right-color: #c8c8c8;
border-bottom-color: #c8c8c8;
border-left-color: #c8c8c8;
}
#banner {
height: 140px;
width: 888px;
}
#content {
background-color: #FFF;
height:auto;
width: 888px;
}
#slide {
background-color: #FFF;
height: 200px;
width: 700px;
position: relative;
left: 132px;
top: 40px;
}
.main {
background-color:#FFF;
width: 590px;
min-height: 200px;
position:relative;
top: 280px;
left: 60px;
clear:both;
}

我的问题是当我使用 main 类创建 div 时。内容 div 不环绕 div.main。幻灯片 div 在内容 div 中似乎没问题。

到目前为止，我很确定我的 div 嵌套在正确的位置。

这就是我想要达到的目标：

--------------------------------------
-                                    -
-        -----------------------     -
-        -     SLIDE           -     -
-        -                     -     -
-        -----------------------     -
-                                    -
-    -------------------             -
-    -    MAIN         -             -
-    -                 -             -
-    -------------------             -
--------------------------------------

这里是项目的链接：Test

Answer 1

当您浮动一个元素时，您将其从文档流中取出。因此，父容器不再包含元素。强制父容器包含浮动子容器的选项：

1) 给容器一个溢出属性：

#container { overflow: auto }

2) 也让容器浮动：

#container { float: left }

3) 添加第三个子元素，清除前两个浮点数：

.clearingElement { clear: both }