Is it possible to create these three different layouts with CSS using the same underlying HTML structure?

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.

Answer 2

It is possible and you can find lots of great examples (which you could copy!) at CSS Zen Garden.

Answer 3

HTML:

<div class="container">
   <label for="Name" class="label">Name:</label>
   <input id="Name" name="Name" />
</div>
<div class="container">
   <label for="LongName" class="label">Long Name:</label>
   <input id="LongName" name="LongName" />
</div>

CSS1:

.container {}
.label
{
   display: block;
}

CSS2:

.container
{
   margin-left: 12em;
}

.label
{
   float: left;
   margin-left: -12em;
}

CSS3:

.container
{
    margin-left: 8em;
}

.label
{
    float: left;
    margin-left: -8em;
    width: 8em;
    text-align: right;
}

Answer 4

The problem I find whenever I have to do something like this is that the left side of the list (such as examples 2 and 3) is that there is no way (or at least I don´t know any) of letting both columns have a variable width.

This is specially an issue when data to be showed in the first column is variable (i.e. not labels) or comes in different languages.

If neither of those are a problem for you, then solution using DL´s from Program.X should do it.

Answer 5

I build one CSS Form Framework called Formy. All 3 variants are included without changing any HTML.

Examples:

1. Variant1
2. Variant2
3. Variant3