底部边缘没有考虑到，div是重叠的，为什么？

Question

我正在实现一个典型的标题，左侧col，mid col，右侧col，页脚布局。我把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。

它会产生另一个问题，但已找到解决方案here。