HTML CSS Content div不会浮动

我试图将内容div放在两个背景div上，但是我的代码仅将其设置在底部div上。下面有2张图片，向您展示我想要实现的目标和正在发生的事情。

图片1：我想要实现的目标

图片2：问题

HTML：

<div class="middle">
<div class="middle_bot">


    <div id="content">
        <p class="big">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Curabitur tellus felis, sagittis at neque placerat, 
        laoreet mollis massa. Sed et purus mollis, fringilla 
        tellus et, tincidunt eros. Ut dolor ipsum, feugiat et 

        </p>
    </div>
</div>
</div>

CSS：

.middle
{

background-image: url(images/bg_middle.png); /* fallback */
background-image: url(images/bg_middle.png), -webkit-gradient(linear, left top, left bottom, from(#000000), to(#009dca)); /* Saf4+, Chrome */
background-image: url(images/bg_middle.png), -webkit-linear-gradient(top, #000000, #009dca); /* Chrome 10+, Saf5.1+ */
background-image: url(images/bg_middle.png),    -moz-linear-gradient(top, #000000, #ffffff); /* FF3.6+ */
background-image: url(images/bg_middle.png),     -ms-linear-gradient(top, #000000, #009dca); /* IE10 */
background-image: url(images/bg_middle.png),      -o-linear-gradient(top, #000000, #009dca); /* Opera 11.10+ */
background-image: url(images/bg_middle.png),         linear-gradient(to bottom, #000000, #009dca); /* W3C */

    /*background-color:blue;
    background-repeat: repeat;
    background: url(images/bg_middle.png);*/
    height: 40%;
    width: 100%;
}

.middle_bot
{

background-image: url(images/bg_middle2.png); /* fallback */
background-image: url(images/bg_middle2.png), -webkit-gradient(linear, left top, left bottom, from(#000000), to(#ffffff)); /* Saf4+, Chrome */
background-image: url(images/bg_middle2.png), -webkit-linear-gradient(top, #000000, #ffffff); /* Chrome 10+, Saf5.1+ */
background-image: url(images/bg_middle2.png),    -moz-linear-gradient(top, #000000, #ffffff); /* FF3.6+ */
background-image: url(images/bg_middle2.png),     -ms-linear-gradient(top, #000000, #ffffff); /* IE10 */
background-image: url(images/bg_middle2.png),      -o-linear-gradient(top, #000000, #ffffff); /* Opera 11.10+ */
background-image: url(images/bg_middle2.png),         linear-gradient(to bottom, #000000, #ffffff); /* W3C */

    /*background-color:blue;
    background-repeat: repeat;
    background: url(images/bg_middle2.png);*/
    height: 50%;
    bottom:0;
    position:absolute;
    width: 100%;
}

#content
{
    background: url(images/content2.png);
    width: 800px;
    padding: 10px;
    border: 1px solid #373737;
    margin: 0;
    word-wrap: break-word;
    margin-left: auto ;
    margin-right: auto ;
    box-shadow: 2px 2px 2px #000000;
}