Css 如何防止内容与页脚重叠？

所以我现在正在一个网站上工作，所有的内容都安排在页面周围的框中。css如下所示：

section {
    position: static;
    bottom: 110px;
}

#topLeft, #topRight, #bottomLeft, #bottomRight, #below {
    background-color: white;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: rgba(0,0,0,0) 0px 2px 3px, inset rgba(0,0,0,0) 0px -1px 2px;
    border-radius: 20px;
    border: 1px solid #00BFFF;
}

#topLeft, #topRight {
    padding-top: 10px;
}

#topLeft {
    float: left;
    margin-top: 200px;
    width: 630px;
    height: 310px;
}

#topRight {
    float: right;
    margin-top: 200px;
    width: 300px;
    height: 630px;
}

#middle {
    clear: left;
    position: absolute;
    margin-top: 530px;
    margin-left: 330px;
    width: 320px;
    height: 310px;
}

#bottomLeft {
    clear: left;
    float: left;
    margin-top: 10px;
    width: 300px;
    height: 630px;
}

#bottomRight {
    clear: right;
    float: right;
    margin-top: 10px;
    width: 630px;
    height: 310px;
}
img {
    border-radius: 20px;
}

#topRight img {
    margin-top: 25px;
}

#bottomLeft img {
    margin-top: 20px;
}

footer {
    clear: left;
    /*position: relative;*/
    bottom: 0px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    padding-top: 40px;
    height: 110px;
    font: normal 12px 'Helvetica', sans-serif;
    color: white;
    text-align: center;
}

#below {
    clear: both;
    position: absolute;
    float: left;
    margin-top: 1170px;
    width: 960px;
}

页脚位于下面，其css如下所示：

section {
    position: static;
    bottom: 110px;
}

#topLeft, #topRight, #bottomLeft, #bottomRight, #below {
    background-color: white;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: rgba(0,0,0,0) 0px 2px 3px, inset rgba(0,0,0,0) 0px -1px 2px;
    border-radius: 20px;
    border: 1px solid #00BFFF;
}

#topLeft, #topRight {
    padding-top: 10px;
}

#topLeft {
    float: left;
    margin-top: 200px;
    width: 630px;
    height: 310px;
}

#topRight {
    float: right;
    margin-top: 200px;
    width: 300px;
    height: 630px;
}

#middle {
    clear: left;
    position: absolute;
    margin-top: 530px;
    margin-left: 330px;
    width: 320px;
    height: 310px;
}

#bottomLeft {
    clear: left;
    float: left;
    margin-top: 10px;
    width: 300px;
    height: 630px;
}

#bottomRight {
    clear: right;
    float: right;
    margin-top: 10px;
    width: 630px;
    height: 310px;
}
img {
    border-radius: 20px;
}

#topRight img {
    margin-top: 25px;
}

#bottomLeft img {
    margin-top: 20px;
}

footer {
    clear: left;
    /*position: relative;*/
    bottom: 0px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    padding-top: 40px;
    height: 110px;
    font: normal 12px 'Helvetica', sans-serif;
    color: white;
    text-align: center;
}

#below {
    clear: both;
    position: absolute;
    float: left;
    margin-top: 1170px;
    width: 960px;
}

我想在其他框的下方，但在页脚上方添加一个新框。其css如下所示：

section {
    position: static;
    bottom: 110px;
}

#topLeft, #topRight, #bottomLeft, #bottomRight, #below {
    background-color: white;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: rgba(0,0,0,0) 0px 2px 3px, inset rgba(0,0,0,0) 0px -1px 2px;
    border-radius: 20px;
    border: 1px solid #00BFFF;
}

#topLeft, #topRight {
    padding-top: 10px;
}

#topLeft {
    float: left;
    margin-top: 200px;
    width: 630px;
    height: 310px;
}

#topRight {
    float: right;
    margin-top: 200px;
    width: 300px;
    height: 630px;
}

#middle {
    clear: left;
    position: absolute;
    margin-top: 530px;
    margin-left: 330px;
    width: 320px;
    height: 310px;
}

#bottomLeft {
    clear: left;
    float: left;
    margin-top: 10px;
    width: 300px;
    height: 630px;
}

#bottomRight {
    clear: right;
    float: right;
    margin-top: 10px;
    width: 630px;
    height: 310px;
}
img {
    border-radius: 20px;
}

#topRight img {
    margin-top: 25px;
}

#bottomLeft img {
    margin-top: 20px;
}

footer {
    clear: left;
    /*position: relative;*/
    bottom: 0px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    padding-top: 40px;
    height: 110px;
    font: normal 12px 'Helvetica', sans-serif;
    color: white;
    text-align: center;
}

#below {
    clear: both;
    position: absolute;
    float: left;
    margin-top: 1170px;
    width: 960px;
}

问题是此框与页脚重叠！我就是想不出怎么解决这个问题，有什么想法吗

#below { clear:both }

---

应该足够了

请提供一个jsfiddle=）以前没有使用过jsfiddle，希望这个链接可以工作：