zSynopsis zSynopsis - 2 months ago 9
CSS Question

Webform Layout: Table or something else

I have to create a webform that looks something like this


column column - column column column column - column column
label: input - label: input
label: input - label: input - label: input
label: input - label: input
label: input
label: input - label: input
label: input - label: input - label: input - input: label


etc..

Now what would be the best way to go about doing this?
I've been trying ways to accomplish with css but I've failed over and over again.

Should I just go ahead and use tables for this or is there a simple way to do this with css?

Answer

How about something like this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style type="text/css">
    .column {
      width: 200px;
      float: left;
    }

    .column label {
      clear: both;
      float: left;
      margin-right: 10px;
      margin-bottom: 5px;
      text-align: right;
      width: 75px;
    }

    .column input {
      float: left;
      width: 100px;
    }
  </style>
</head>

<body>
  <div class="column">
    <label>Label 1:</label> <input type="text" />
    <label>Label 2:</label> <input type="text" />
    <label>Label 3:</label> <input type="text" />
    <label>Label 4:</label> <input type="text" />
  </div>

  <div class="column">
    <label>Label 5:</label> <input type="text" />
    <label>Label 6:</label> <input type="text" />
    <label>Label 7:</label> <input type="text" />
    <label>Label 8:</label> <input type="text" />
  </div>
</body>
</html>

If you like that, you might consider using fieldsets instead of divs for the columns. They style nicely and are more semantic. Either way works well though.

Comments