Question

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 and 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?

Answer 1

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>