Position div elements to stick to the left & right of another div element?

How can I style two div elements so that they stick to the left & right of another div element like in the following example?

<div id="container">
    <div id="left">Left.</div>
    <div id="box">This is a box.</div>
    <div id="right">Right.</div>
</div>

+#container--------------------------------------------------+
|                                                            |
|                                                            |
|        +#left---+#box-------------------+#right--+         |
|        |        |                       |        |         |
|        |        |                       |        |         |
|        |        |                       |        |         |
|        |  Left. |     This is a box.    | Right. |         |
|        |        |       开发者_如何学C                |        |         |
|        |        |                       |        |         |                                                            
|        +--------+-----------------------+--------+         |
|                                                            |
|                                                            |
+------------------------------------------------------------+

Try this: http://jsfiddle.net/jHs2b/

#left{
    float: left;
}

#right{
   float: right;
}

Here is an example: http://jsfiddle.net/maniator/rmz66/

#container{
    display: block;
    width: 1000px;
}
#left, #box, #right{
    display: inline-block;
    vertical-align: top;
}
#left, #right{
    width: 200px;
}
#box{
    width: 500px;
}

Get rid of margins, paddings and etc, so you can maximise #box, and #left, #right

#container {position:relative;}
#left, #right {position:absolute;}
#right {right:0;}
#box {width:XXX;margin:0 auto;}

Specify your box width and also a height if you don't have any content yet.

<div id="container" style="padding: 50px;border:1px solid gray">
    <div id="left" style="padding: 10px;float:left;border:1px solid green">Left.</div>
    <div id="box" style="padding: 10px;float:left;border: 1px solid red">This is a box.</div>
    <div id="right" style="padding: 10px;float:left;border:1px solid blue;">Right.</div>
</div>

It would be easier to put a div (let's call it "parent") around your three div. You center #parent inside your #container then you put #box, #left and #right in float: left. This should work.

A table or a list will work too.