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

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 справа находится на отдельной строке, что не , что я хочу.Как я могу сделать так, чтобы он оставался на одной линии с другими DIV?

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

Answer 1

Это потому, что ваш #center_s div расширяется до ширины оставшейся строки. Если вы поместите #right_side выше #center_s в порядке HTML, он будет работать нормально.

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

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

Answer 2

Потому что в центре нет плавающих элементов, и элементы с плавающей точкой должны появляться первыми. Добавьте 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>

Answer 3

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

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