A while back I had a need to create a price list. What I wanted to have the items on the left and the prices on the right with dots connecting the two. Like old timey movie credits.

I first tried just text and periods but I could never get the line lengths right. It looked messy. Then I tried to use table but the dots would only go as far as the longest text string in the column. So I simplified it and fond this solution.

It’s very simple. A div with two spans. One for the item and one for the price. The div has a background image of dots. The spans have background color to mask the dots, and the item span is floated right.

<br /> <div class="dotList"><br /> <span class="price"> $1 </span><br /> <span class="item"> Item 1 </span><br /> </div><br /> <div class="dotList"><br /> <span class="price"> $10 </span><br /> <span class="item"> Item </span><br /> </div><br /> <div class="dotList"><br /> <span class="price"> $1000 </span><br /> <span class="item"> Item 10 </span><br /> </div><br />`

Floated items float in correspondence to what comes next in the code, so make sure the price comes first since that is floated.

The CSS:

<br /> .dotList {<br /> width: 200px;<br /> height: 18px;<br /> margin-top: 2px;<br /> background: url(http://www.thescriptiest.com/img/dots.gif);<br /> background-position: bottom;<br /> background-repeat: repeat-x;<br /> }<br /> .dotList span {<br /> display: inline-block;<br /> line-height: 18px;<br /> background: #ffffff;<br /> }<br /> span.item {<br /> font-weight: bold;<br /> }<br /> span.price {<br /> float: right;<br /> }<br />`

Required Image:

<- Dots Image