Question

I have to create a name-value list in HTML. (Actually they are form elements, label and input)

How do I build this output so that a web designer can create the following three different layouts without changing the original HTML structure?

Variant 1:

Name One: Value One  Name Two: Value Two 

Variant 2:

Name One:         Value One Longer Name Two:  Value Two 

Variant 3:

       Name One:  Value One Longer Name Two:  Value Two 

Creating an output for variant 2 and 3 alone would be trivial, I’d just use a table and the alignment is changed with CSS.

But how do I do it when I want to allow all three variants? How would the CSS code look like? Is it even possible?

Answer 1

I would use a DL list, eg:

<dl>    <dt>Name One:</dt>    <dd>Value One</dd>    <dt>Name Two:</dt>    <dd>Value Two</dd>    <dt>Name Three:</dt>    <dd>Value Three</dd> </dl> 

and style using (roughly):

Example 1:

dl dt { } dl dd { margin: 0px; padding: 0px; } 

Example 2:

dl dt { display: block; float: left; width: 150px; clear:left; } dl dd { display: block; float: left; } 

Example 3:

dl dt {display: block; float: left; width: 150px; text-align: right; clear:left; } dl dd {display: block; float: left; } 

… and it’s semantic.