div går ikke helt op til anden div

Hejsa

Jeg prøver at lave en footer, men jeg kan ikke få den helt op til min content boks. Det ser sådan ud:

(Se bort fra skyggen i bunden, den skal væk :-).

http://postimg.org/image/9euktoxo3/

Jeg tænkte egentligt at det var noget med padding-top og gøre, men det har ikke hjulpet. Er der nogle som kunne have en ide til hvad det kunne være?

Mit CSS er her:

body {
    background-color: #e9e9e9;
}

.headline {
    font-size: x-large;
    text-align: center;
    font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif;

}

.text {
    font-size: normal;
    margin-left: 10px;
    margin-right: 10px;

}
.banner {
    display: block;
    float: left;
    width: 1000px;
    height: 300px;
    border: thick;
    border-color: black;
    background-image: url("../img/banner.png");
    background-repeat: no-repeat;
    margin-top: 20px;
    margin-left: 115px;
    background-color: purple;
    box-shadow: 1px 10px 10px #888888;
}

.background {
    display:inline-block;
    background-image: url("../img/content_background.png");
    height: 350px;
    width: 1000px;
    margin-left: 115px;
    box-shadow: 1px 10px 10px #888888;

}

.leftbox {
    display: inline-block;
    float: left;
    height: 300px;
    width: 25%;
    border-color: red;
    background-color: white;
    margin-top: 20px;
    margin-left: 7%;
    margin-right: 50px;
    border-top-left-radius: 10px 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10% 8%;
    border-bottom-left-radius: 10% 8%;
    box-shadow: 10px 10px 15px #888888;
}

.centerbox {
    display: inline-block;
    float: left;
    height: 300px;
    width: 25%;
    border-color: red;
    background-color: white;
    margin-top: 20px;
    margin-right: 50px;
    border-top-left-radius: 10px 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10% 8%;
    border-bottom-left-radius: 10% 8%;
    box-shadow: 10px 10px 15px #888888;
}

.rightbox {
    display: inline-block;
    float: left;
    height: 300px;
    width: 25%;
    border-color: red;
    background-color: white;
    margin-top: 20px;
    border-top-left-radius: 10px 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10% 8%;
    border-bottom-left-radius: 10% 8%;
    box-shadow: 10px 10px 15px #888888;
}

.hr {
    margin-top: 1px;
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:    -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

.test {
    display: block;
    float: left;
    width: 1000px;
    height: 100px;
    margin-left: 115px;
    background-color: purple;
}