ProblemYou want to transform a one-column form (see Figure 7-19) to two columns. Figure 7-19. The form in one columnSolutionFirst, 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 columnsFigure 7-21. The form is laid out in two columnsDiscussionUsing 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 AlsoChapter 9 for more techniques on laying out the elements of a web page. |