How to display text, a dotted line then more text spanning the width of the page?

Question

I\'d like to display some text then a dotted line then some more text on the same line on a HTML page e.g.

Name: ............................................         


        

Answer 1

My solution is use postion:relative; and position:absolute;

html

.............................................................................................................................Name:(Engineer)
.............................................................................................................................Factory Location:(Not invoice address)

css

.row {width:500px;position:relative;}
.left {position:absolute;left:0;background:white;}
.right {position:absolute;right:0;background:white;}

Example: http://jsfiddle.net/PyCnT/

The row has position:relative; and a fixed width. Any span children will will have position:absolute; and using left:0 & right:0 the span moved in the correct place. Adding a background:white override the dots that are in the background of the span.