CSS layout for 3 sections, with side section width of content and middle section width consuming remaining

Basically I want to layout a toolbar with some icons on the left and right and a variable sized text field in the middle. I want the text field to take up the remaining space in the middle. The side sections widths are not known ahead of time, they are determined by the number of visible buttons on each side.

The problem is similar to http://www.alistapart.com/d/holygrail/example_开发者_如何学JAVA4.html except he side column widths can not be hardcoded.

Is it possible to do this purely in CSS?

It sounds like you need display:table-cell

http://www.w3schools.com/css/pr_class_display.asp

Container can be display:table-row and the children can be display:table-cell. I believe that should work for you.

To answer my own question, if you're using a browser that supports the flexible box layout model, setting the left and right DIVs to "-webkit-box-flex: 0;" and the center DIV to "-webkit-box-flex: 1;" does exactly what I want. The container should have "display: -webkit-box;"