How come these DIVs will not display on the same line? - css

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 it stay on the same line as the other DIVs?
Note: you can see a live demo and play around with the code here: http://jsfiddle.net/UDb4D/

Answer 1

It's because your #center_s div expands to the width of the remaining line. If you put #right_side above #center_s in the HTML order, it'll work fine.
See here:
http://jsfiddle.net/UDb4D/2/

Answer 2

Because the center has no float and right-floated elements need to appear first. Add float: left; to your #center_s or move the #right_side div before so it looks like this:
#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 hacked this up. Bare in mind that I'm 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;
}