Recipe 7.13. Designing a Two Column Form Without Tables


Problem

You want to transform a one-column form (see Figure 7-19) to two columns.

Figure 7-19. The form in one column


Solution

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

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

Then set the display of the input and label elements to be block:

label {  margin-top: .33em;  display: block; } input {  display: block;  width: 250px; }

Create the second form column by setting the first div element, register, to float left as you see in Figure 7-20:

#register {  float: left; }

Next apply enough padding on the left side of the second column in case the second column is shorter than the first column (see Figure 7-21):

#register {  float: left; } #contactinfo {  padding-left: 275px; }     

Figure 7-20. Form elements start to form two columns


Figure 7-21. The form is laid out in two columns


Discussion

Using the float property allows designers to quickly build a two-column form. The main problem with this approach is in case where the right column is longer than the first. The wrapping of the form elements can be confusing to users. By setting the padding to accommodate the width of the first column, designers create seamless looking columns.

See Also

Chapter 9 for more techniques on laying out the elements of a web page.




CSS Cookbook
CSS Cookbook, 2nd Edition
ISBN: 0596527411
EAN: 2147483647
Year: 2006
Pages: 235

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net