Real World Style

FORM(s) and Function

A common use for TABLE layout is lining up FORM elements with their labels. While it could be argued that this is an appropriate use of TABLEs, the CSS technique that I describe below proves to be useful for other, similar layout needs as well.

A typical layout for FORMs has the labels on the left, flush right, with the form elements on the right, flush left, with everything meeting in the middle:

Based on original code concept from Eric Meyer.

The form above was created without the use of TABLEs. Here we are using FLOAT to accomplish the positioning. The trick is to create a DIV that works like the TABLE row that we are used to using. Then we'll create two SPANs: one for the labels and the other for the form elements. Float the label SPAN left and the form element SPAN right. For the label SPAN, align the text right, and give the form element SPAN left-aligned text.

The CSS looks like this:

div.row {
  clear: both;
  padding-top: 5px;
  }

div.row span.label {
  float: left;
  width: 100px;
  text-align: right;
  }

div.row span.formw {
  float: right;
  width: 235px;
  text-align: left;
  } 

The CSS above also gives widths for the SPANs. These can be absolute values like the example, or percentages that add up to 100% or slightly less, depending on padding and borders (and the box model you are designing for). In the example I have wrapped the form in another DIV to give it a border and a background.

The example HTML looks like:

<div style="width: 360px; background-color: #ccc;
border: 1px dotted #333; padding: 5px;
margin: 0px auto;">
  <form>
    <div class="row">
      <span class="label">Name:</span><span
class="formw"><input type="text" size="25" /></span>
    </div>
    <div class="row">
      <span class="label">Age:</span><span
class="formw"><input type="text" size="25" /></span>
    </div>
    <div class="row">
      <span class="label">Shoe size:</span><span
class="formw"><input type="text" size="25" /></span>
    </div>
    <div class="row">
      <span class="label">Comments:</span><span
class="formw">
        <textarea cols="25" rows="8">
        Go ahead - write something...
        </textarea>
      </span>
    </div>
  <div class="spacer">
  &nbsp;
  </div>
 </form>

</div>

What is the div class="spacer" in there for? When you float an element with CSS, it no longer takes up any "space" and any background and/or border will show up above the images instead of surrounding them. We need to add some content other than the floated DIVs into the container DIV to force the background or border to contain the floated elements as well. Add this to your style sheet to take care of that:

div.spacer {
  clear: both;
  }

Front and Center

You may have noticed part of the STYLE attribute for the containing DIV above contained the following: margin: 0px auto;. This results in the 350 pixel DIV being centered in standards compliant browsers. Some browsers, like IE5.x for Windows ignore this, but will (incorrectly) center DIVs that have a TEXT-ALIGN of center. To center DIVs in these browsers you can wrap a DIV with TEXT-ALIGN set to center, around another DIV that sets MARGIN to auto (and TEXT-ALIGN to left so text will align correctly). See Rob Chandanais' Layout Reservoir for this and other centering technniques.