Коробки всплывают из нижнего колонтитула

Нужна помощь по исправлению нижнего колонтитула. Один из ящиков выходит из нижнего колонтитула. Все 3 должны быть в очереди, рядом друг с другом. Css загружается и отображается html. Однако я пробовал много вещей, но, похоже, ничего не работает. однако правый ящик всегда выходит из нижнего колонтитула, я не вижу проблемы, поэтому, пожалуйста, было бы здорово получить некоторую помощь и понять, где именно я поступил неправильно, поэтому я могу узнать это спасибо: D

Css и html

 <%-- Footer --%>

    <div id="footer">

        <div id="footer_placement">

            <div id="left">
                <p></p>
            </div>
            <div id="middel">
                <p></p>
            </div>
            <div id="right">

            </div>

        </div>
    </div>

    <%-- Footer --%>

 #footer {
    bottom: 0;
    width: 100%;
    display: block;

    background-color: #fff; 

    max-height: 50px;
}



#footer_placement {
    max-width: 1024px;
    margin: 0 auto;
    display: block;
    max-height:50px;
}

#right {


    float: right;
    height: 50px;
    width: 298px;
    background-color:black;

}

    #right img {
        height: 50px;
        width: 50px;

    }

#middel {

    height: 50px;
    margin: 0 auto;
    width: 300px;
    background-color:black;
}

    #middel p {

        text-align: center;
        color: #321a51;
        font-size: 12px;
        font-family: muli;
    }

#left {

    width: 298px;
    height: 50px;
    float:left;
    background-color:black;
}

    #left p {

        text-align: center;
        color: #321a51;
        font-size: 12px;
        font-family: muli;
    }