HTML Forms: Using "div" tag instead of "table" tag

Name:

Age:

Shoe size:

Comments: Go ahead - write something...

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;
  } 

div.spacer {
  clear: both;
  }

The HTML looks like this:

<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>

Share

Tweet