Question

I am implementing a typical header, left col, mid col, right col, footer layout. I have wrapped the lft,mid,right divs in a midBlock div. I am including a picture to make it clear:

I have set a bottom margin of 10px on the midBlock, however, it overlaps with the footer. Why? And how to solve it?

Here is the JSFiddle.

Here is my 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

I have found a solution by setting:

min-height:1px;
overflow:auto;

in the midBlock css. Here is the JSFiddle.

It creates another issue, but a solution has been found here.