CSS Data Entry Design

by rajeshpillai

HTML

<div class="left-column">
  <p>
    <label for="tbDepartment">Department:</label>
    <input type="text" id="tbDepartment" name="tbDepartment" />
  </p>
  <p>
    <label for="tbFund">Fund:</label>
    <input type="text" id="tbFund" name="tbFund" />
  </p>
  <p>
    <label for="tbProgram">Program:</label>
    <input type="text" id="tbProgram" name="tbProgram" />
  </p>
</div>
<div class="right-column">
  <p>
    <label for="tbProject">Project:</label>
    <input type="text" id="tbProject" name="tbProject" />
  </p>
  <p>
    <label for="tbSpeedKey">Speed Key:</label>
    <input type="text" id="tbSpeedKey" name="tbSpeedKey" />
  </p>
  <p>
    <label for="tbAward">Award:</label>
    <input type="text" id="tbAward" name="tbAward" />
  </p>
</div>
<div>
  <p>
    <label class="textarea-label" for="taProjectDesc">Project Description:</label>
  </p>
  <p>
    <textarea id="taProjectDesc" name="taProjectDesc" />
  <p>
</div>

CSS

p{
 margin:1em 0;
}
label{
 float:left;
 width:5em;
 text-align:right;
 margin-right:0.5em;
}
input[type="text"]
{
 width: 10em;
}
.left-column, right-column
{
 float:left;
}
.left-column
{
 margin-right:1em;
}
.textarea-label
{
 float:none;
}
textarea
{
 height:5em;
 width:35em;
}