html - 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: .......................................................... (Engineer)

I want the "Name" to be left justified against the left border and "Engineer" to be right justified against the right border and then the browser to be able to fill the gap between the two with repeating dots.

I've tried a good few different ways to get this to work using CSS and HTML but can't quite get it right. I don't want to have to specify the width (actual or percentage) of each component so that the solution is re-usable with words of different lengths e.g. the same solution would work with:

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

Hope this question makes sense, any advice appreciated, thanks.

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 :

<div class="left">Name:</div>
<div class="right">Engineer</div>
<div class="dotted"></div>
<div class="left">Factory location:</div>
<div class="right">not invoice address</div>
<div class="dotted"></div>

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;
}