layout fields using CSS

Question

Hi,

I'm trying to layout field labels and values like this:

       Name: Bob
        Age: 25
 Occupation: Code Monkey

The relevant HTML is

<div class="field">
  <span class="reset">End Time:</span>
  <span>05:00pm</span>
</div>

<div class="field">
  <span class="reset">Items:</span>
  <span></span>
</div>

<div class="field">
  <span class="reset">Repeats:</span>
  <span>Never</span>
</div>

And the relevant CSS is:

div.field {
  margin-bottom:10px;
}

span.reset {
  display: block;
  float: left;
  margin-right: 0.5em;
  text-align: right;
}

Unfortunately, the "Repeats" field is being shown on the same line as the "Items" field. I verified that this only happens when the value of the "Items" field is empty <span></span>.

I tried added clear: left to span.reset, and while this stops two fields appearing on the same line, it totally messes up the alignment of the labels and fields.

Is there any way I can fix this problem without drastically changing the XHTML?

Thanks, Don

Answer 1

Add this to your CSS clear: left;:

div.field {
  clear:left;
  margin-bottom:10px;
}

This will force it to the next line below.

Answer 2

If you want all these to line up you're going to have to give the label (reset?) a fixed width either directly or indirectly. Try this:

div.field { overflow: hidden; }
div.field span { margin-left: 150px; display: block; }
span.reset { float: right; width: 150px; margin-left: 0; text-align: right; }