How to stop content from overlapping the footer?

Question

So I am working on a website at the moment, and all the content is arranged in boxes around the page. The css looks like this:

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;
}

And the footer goes below this, its css looks like this:

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;
}

I want to add a new box below the others, but above the footer. Its css looks like this:

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

The problem is that this box overlaps the footer! And I just cannot work out how to fix this, any ideas?

Answer 1

#below { clear:both }

should be enough