Need 3 divs in a row with the center div filling the width of the page, regardless of content length

Question

I am trying to create an html interface, where rows will be dynamically added to my web page.

The way I am currently doing it is by using nested DIVs with the CSS display style set to table.

Each row has 3 divs. The left div and the right div have a fixed width, while the middle div should expand to fit the page horizontally regardless of the length of it's content.

My problem is I'm not sure how to make that center div expand the entire remaining width of the page. With the code below, the center div is as small as the content.

I tried a solution that floated the left div left, and the right div right, however that would not let me select a row of text properly. i.e., if I started selecting the right div's content, then dragged towards the left, the left and center div would not be selected.

The solution only needs to target webkit based engines, as my code will only be used in a webkit based environment.

EDIT!

I forgot to mention that I also tried using tables. However I also need to avoid getting horizontal scroll bars appearing on the page when the screen is shrinking. When I use tables and shrink the page, the center div stops shrinking at a certain point (due to the fixed width percentages I guess).

My CSS code:

.chatarea
{
    display: table;
    height = 100%;
    padding-top:50px;
    margin: 0px;
}

.row
{
    #display: table-row;
}

.nick
{
    display: table-cell;
    width: 140px;
    border-style: solid;
    text-align: right;
}

.timestamp
{
    display: table-cell;
    width 50px;
    border-style: solid;
}

.message
{
    display: table-cell;
    border-style: solid;
}

And the relevant html

<div class="chatarea">
    <div class="row">
        <div class="nick">
            <p>Some Nick</p>
        </div>
        <div class="message">
            <p>Some Message</p>
        </div>
        <div class="timestamp">
            <p>Some Timestamp</p>
        </div>
    </div>
</div>

Answer 1

I believe this is a solution:

• Add border-collapse: collapse; to .chartarea to remove the double border width.
• Add width: 100% to .chartarea to cover the entire width of the window.
• Add width: 80%; to .message to have it grow as the window width changes.
• Add white-space: nowrap; to .nick to control wrapping.
• Add white-space: nowrap; to .timestamp to control wrapping.
• Uncomment display: table-row in .row

Check out this fiddle. Note: the fiddle page appears to have been removed by the server.