Почему эти DIVs не отображаются на одной строке?

Question

У меня есть следующий HTML:

<div id="root"> 
    <div id="left_side">LEFT</div> 
    <div id="center_s">CENTER</div> 
    <div id="right_side">RIGHT</div> 
</div> 

... и CSS:

#root { 
    background-color: #eee; 
} 

#left_side { 
    float: left; 
} 

#center_s { 
    margin-left: auto; 
    margin-right: auto; 
    width: 65px; 
    background-color: #ccc; 
} 

#right_side { 
    float: right; 
} 

Однако, я получаю следующее:

ДИВ по праву является на отдельной строке, которая равна не что я хочу. Как я могу заставить его оставаться на той же линии, что и другие DIV?

Примечание: вы можете увидеть живую демонстрацию и поиграйте с кодом здесь: http://jsfiddle.net/UDb4D/

Answer 1

Это потому, что ваш #center_s DIV расширяется до ширины остающейся линии. Если вы положите #right_side выше #center_s в HTML-порядке, все будет хорошо.

Смотрите здесь:

http://jsfiddle.net/UDb4D/2/

Answer 2

я быстро взломал это. Говорю, что я разработчик, а не веб-дизайнер.

<div id="root" align="center"> 
    <div id="right_side">RIGHT</div> 
    <div id="center_s">CENTER</div> 
    <div id="left_side">LEFT</div> 
</div> 

И ...

#root { 
    background-color: #eee; 
} 

#left_side { 
    display: inline; 
    float: left; 
} 

#center_s { 
    display: inline; 
    margin-left: auto; 
    margin-right: auto; 
    width: 65px; 
    background-color: #ccc; 
} 

#right_side { 
    display: inline; 
    float: right; 
} 

Answer 3

Поскольку центр не имеет поплавка и правые всплывающие элементы должны появиться первым. Добавить float: left; в свой #center_s или переместить #right_side DIV, прежде чем это выглядит следующим образом:

#root { 
    background-color: #eee; 
} 

#left_side { 
    float: left; 
} 

#center_s { 
    margin-left: auto; 
    margin-right: auto; 
    width: 65px; 
    background-color: #ccc; 
    float: left; 
} 

#right_side { 
    float: right; 
} 

<div id="root"> 
    <div id="right_side">RIGHT</div> 
    <div id="left_side">LEFT</div> 
    <div id="center_s">CENTER</div>  
</div>