html中的两种容器,css – 我需要帮助让我的内容div容器包裹两个内部div！

我正在学习如何使用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中似乎没问题.

截至目前,我很确定我的divs嵌套在正确的位置.

这就是我想要实现的目标：

--------------------------------------

- -

- ----------------------- -

- - SLIDE - -

- - - -

- ----------------------- -

- -

- ------------------- -

- - MAIN - -

- - - -

- ------------------- -

--------------------------------------

这是项目的链接：Test