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

Question

Нужна помощь по исправлению нижнего колонтитула. Один из ящиков выходит из нижнего колонтитула. Все 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; 
    } 

Answer 1

использование display:inline-block; для этого IdS: посередине - влево - вправо

Fiddle

Answer 2

Ваша проблема является width от left right and middle divs.

Они действительно не складываются .. попробуйте изменить width .. сделать меньше

jsFIDDLE example