O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Designing a Two-Column Form Without Tables

Problem

You want to transform a one-column form (as shown in Figure 8-15) to two columns.

The form in one column

Figure 8-15. The form in one column

Solution

First, mark out the areas of the form into two different sections using div elements:

<form id="regform" name="regform" method="post" action="/regform.php">
 <div id="register">
  <h4>Register</h4>
  <label for="fmlogin">Login</label>
  <input type="text" name="fmlogin" id="fmlogin" />
  <label for="fmemail">Email Address</label>
  <input type="text" name="fmemail" id="fmemail" />
  <label for="fmemail2">Confirm Address</label>
  <input type="text" name="fmemail2" id="fmemail2" />
  <label for="fmpswd">Password</label>
  <input type="password" name="fmpswd" id="fmpswd" />
  <label for="fmpswd2">Confirm Password</label>
  <input type="password" name="fmpswd2" id="fmpswd2" />
 </div>
 <div id="contactinfo"> <h4>Contact Information</h4> <label for="fmfname">First Name</label> <input type="text" name="fmfname" id="fmfname" /> <label for="fmlname">Last Name</label> <input type="text" name="fmlname" id="fmlname" /> <label for="fmaddy1">Address 1</label> <input type="text" name="fmaddy1" id="fmaddy1" /> <label for="fmaddy2">Address 2</label> <input type="text" name="fmaddy2" id="fmaddy2" /> <label for="fmcity">City</label> <input type="text" name="fmcity" id="fmcity" /> <label for="fmstate">State or Province</label> <input type="text" name="fmstate" ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required