I just want to fix the min and max width of both side li Col for this and need to be dotted line between them col auto adjust i had try the below code.
for example as seen in this image. red block need to be fixed with min and max width and dotted need to be auto adjust.
but result is not near.
http://jsfiddle.net/DjzzK/
Thankyou
<style>
* { margin: 0; padding: 0; }
html { color: black; padding: 2em; font: 16px/1.2 "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
html, #mainhead2 li, span { background: #f7f7ee; }
#main, caption { margin: 0 auto; } /* Application to lie caption element addresses Mozilla Bug 297676. */
#main { border-collapse: collapse; }
caption, li, li { padding: 0.1em 0; }
caption { text-align: center; font-weight: bolder; }
#mainhead2 ul { background: url("http://www.momsformarijuana.org/blogs/skins/mystique/images/dot.gif") 0 78% repeat-x; }
#mainhead2 li, li + li { text-align: right; }
#mainhead2 li { padding-right: 0.4em; font-weight: normal; }
li + li { padding-left: 0.4em; }
cite { font-style: normal; }
span { padding: 0 0.2em; white-space: pre; }
</style>
<div id='main'>
<caption><cite>Dragonseye</cite> Table of Contents</caption>
<div id='mainhead2'>
<ul>
<li scope="row"></li>
<li><span>Prologue</span></li>
<li><span>1</span></li>
</ul>
<ul>
<li scope="row">1</li>
<li><span>Early Autumn at Fort’s Galier</span></li>
<li><span>4</span></li>
</ul>
<ul>
<li scope="row">2</li>
<li><span>Galier at Fort</span></li>
<li><span>49</span></li>
</ul>
<ul>
<li scope="row">3</li>
<li><span>Late Fall at Telgar Weyr</span></li>
<li><span>64</span></li>
</ul>
<ul>
<li scope="row">4</li>
<li><span>Telgar Weyr and lie College</span></li>
<li><span>87</span></li>
</ul>
<ul>
<li scope="row">5</li>
<li><span>Weyrling Barracks and Biula Hold</span></li>
<li><span>104</span></li>
</ul>
</div>
</div>