3 nested divs - Fixed Width parent, Left & Right Width based on content, empty Centre Width equaling the difference?

This might be really tricky!

Here is what i want to achieve:

Here is my test code on jsfiddle

I've tried various things without any luck. The problem is that both the left and right div widths are based on the text width within. I also cant have the joining dotted line going beneath the lef and right divs 开发者_StackOverflowand just mask it by background colour as the background of the site is a gradient.

At least in this case, the parent div is fixed though.

Any thoughts?

I really hate offering suggestions on using tables but, This would be the easiest way to do it with a table/div/css hybrid solution. Tested and works.

<div style="position: relative; width: 300px; height: auto;">
<table style="width: 100%">
  <tr>
    <td style="float: left; width: auto">
        a
    </td>
    <td style="width: 100%; text-align: left;">
        <div style="width: 100%; border-bottom: 1px dotted #fff; height:10px;"> </div>
    </td>
    <td style="float:right">
        z
    </td>
  </tr>
</table>
</div>
<div style="position: relative; width: 300px; height: auto;">
<table style="width: 100%">
  <tr>
    <td style="float: left; width: auto">
        1
    </td>
    <td style="width: 100%; text-align: left;">
        <div style="width: 100%; border-bottom: 1px dotted #fff; height:10px;"> </div>
    </td>
    <td style="float:right">
        infinity
    </td>
  </tr>
</table>
</div>

After playing around with the jsfiddle code a little, and looking up 3-column CSS flexible layouts, I tried googling for 'css table of contents'. The first entry was CSS Table of Contents, which looks like it might work for you. Otherwise, look at the post being referred to in the post, or at other search results.