Dynamically adjusting two outside columns to the variable width of the center column

Question

I would consider myself to be an intermediate/advanced CSS/HTML coder but I'm stumped on how to do the following scenario.. I'm starting to think it is impossible but I really want to believe it is..

Let's say the wrapper width is 1000px.

Within it is three columns. The two outside columns are the same width, this width is decided by the center column. The center column is the only one with content, just one line of text with 30px of padding on either side. So if the line of content is 100px with padding, than the other two columns would be (1000-100)/2 each..

Is there a dynamic way to have the two outside columns adjust to the varying width of the center column that is defined by its varying contents, one line of text?

Graphic of what I am trying to accomplish:

Answer 1

The very closest I could come up with was to use display: table; and table-cell. This creates the dynamic effect you're looking for, but I don't think you can get your desired effect without setting an explicit width to the center element.

HTML:

<div id="wrap">
    <div id="left">
        Left
    </div>
    <div id="center">
        center
    </div>
    <div id="right">
        Right
    </div>
</div>

CSS:

#wrap
{
    width: 1000px;
    display: table;
}

#wrap div
{
    display: table-cell;
    border: 1px solid #000;
    width: auto;
}

#center
{
    padding: 0 30px;
    text-align: center;
}

You can check out my attempt here, it has some buttons for you to see the different states, width on/off and add text etc. (the jQuery has nothing to do with the solution)

I think this is as close as you're going to get with pure CSS.