Why won't these DIVs appear on the same line?

Question

I have the following HTML:

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

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

However, I get the following:

The div on the right is on a separate line, which is not what I want. How can I make him stay on the same line as the other divs?

Note: you can see the live demo and play with the code here: http://jsfiddle.net/UDb4D/

Answer 1

This is because your #center_sdiv expands to the width of the remaining line. If you put the #right_sideabove #center_sin HTML order, it will work fine.

Look here:

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

Answer 2

, . float: left; #center_s div #right_side, :

#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

I quickly cracked it. Ready to keep in mind that I am a developer, not a web designer.

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

AND...

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