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

Simple solution with no image

DEMO

Output :

This solution floats both texts and the dotted bottom border expands to the remaining width. Here is the relevant code :

HTML :

Name:
Engineer

Factory location:
not invoice address

CSS :

div{
    height:1em;
}
.left,.right{
    padding:1px 0.5em;
    background:#fff;
    float:right;
}
.left{
    float:left;
    clear:both;
}
.dotted{
    border-bottom: 1px dotted grey;
    margin-bottom:2px;
}