Div columns like table columns

I have three columns which are divs acting like table cells, one in the left hand side, one in the middle, one to the right. The divs to the sides have fixed widths which makes them stationary. In an HTML table with three columns, when the left or the right one is removed, the non-stationary one usually expends itself to fill the area. I need to do that with divs.

I have tried appending left and right columns in middle column and set float properties to each one, but was unable to estimate the length of the content. Therefore if the content was too long, the text was plac开发者_如何学JAVAed at the bottom of other columns. I have also tried the display property to render it as a table-column. It works as intended. However it isn't really cross-browser compatible and causing me such problems.

Is there a way to accomplish this just by setting some CSS setting so that my non-stationary column would expend itself if I remove one of the stationary divs? I'm trying to avoid the use of JavaScript unless I have to.

Have you tried applying a width to the middle div, like this:

<div id="wrapper" style="clear:both;">
   <div id="left" style="width:50px; float: left;"></div>
   <div id="center" style="width:100%;"></div>
   <div id="right" style="width:50px; float: right;"></div>
</div>

This should make the center div fill out any left-over space