css - 不考虑下边距，div重叠，为什么？

Question

我正在实现一个典型的页眉、左列、中列、右列、页脚布局。我已将 lft,mid,right 包裹div在 midBlock 中div。为了清楚起见，我附上了一张图片：

我在 midBlock 上设置了 10px 的下边距，但是它与页脚重叠。为什么？以及如何解决？

这是JSFiddle。

这是我的CSS：

body {
    background-image:url('./img/GreenLetters.jpg');
}

#blankPage {
    background-color: #fffffd;
    width: 1020px;
    margin: 0px auto;
    border: 0px;
    padding: 10px;
    position:relative;
}

#header {
    background-color: #000000;
    color:red;
    width: 1000px;
    margin: 0px 0px 10px 0px;
    border: 0px;
    padding: 10px;
}

#midBlock {
    margin: 0px 0px 10px 0px;
    border: 0px;
    width: 1020px;
    position:relative;
    left:0px;
    top:0px;
}

#leftCol {
    background-color: #123456;
    width: 160px;
    margin: 0px;
    border: 0px;
    padding: 0px;
    position:absolute;
    left:0px;
    top:0px;
}

#midCol {
    background-color: #654321;
    width: 660px;
    margin: 0px 10px 10px 0px;
    border: 0px;
    padding: 10px;
    position:absolute;
    left:170px;
    top:0px;
}

#rightCol {
    background-color: #567890;
    width: 160px;
    margin: 0px;
    border: 0px;
    padding: 0px;
    position:absolute;
    left:860px;
    top:0px;
}


#footer {
    background-color: #000000;
    color:red;
    width: 1000px;
    margin: 10px 0px 0px 0px;
    border: 0px;
    padding: 10px;
    position:relative;
    left:0px;
    top:0px;
}

Answer 1

我通过设置找到了解决方案：

min-height:1px;
overflow:auto;

在 midBlock css 中。这是JSFiddle。

它产生了另一个问题，但在这里找到了解决方案。