The boxes float out of the footer

Question

Need help to fix the footer. One of the boxes fals out of the footer. All 3 should be in a line, next to each together. The Css is uploaded and html showed. However i've tried a lot of stuff but seems nothing to be working. however the right box always out of the footer, i cloudn't figure out the problem so please it would be great to get some help and understand exactly where i did go wrong so i can learn it thank you :D

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

Answer 1

use display:inline-block; for this ids: middle - left - right

Fiddle