Container fix width. Center div dynamic width. want left right divs to fill out remaining width equally

Question

Have Three columns..Combine width of all three is fixed.. 2nd ( center ) column will have dynamic content.. I need left and right column to fill out remaining space ( container width - center column dynamic width )equally.

Example: http://jsfiddle.net/htKje/

<div class="container">
   <div class="bg"></div>
   <div>Lorem Ipsum</div>
   <div class="bg"></div>
</div>

CSS :
.container { width:500px; }
.bg {backgrould:#CCC; }

Answer 1

If you need the left and right columns just for setting the background, then most probably, you don't even need them at all.

Simply setting the background on the .container, giving the same container text-align: center, making the center column inline-block and reseting the background and text-align on it will do the trick.

demo

HTML:

<div class='container'>
    <div class='c'>booooo add remove text here</div>
</div>

CSS:

.container {
    background: #ccc;
    text-align: center;
}
.c {
    display: inline-block;
    background: white;
    text-align: left;
}