Question : How To Create Cross-Browser Three Column CSS Form

Hello:

I want to create a three-column form using strictly CSS. I did try one which worked great on IE8 but not so great on other browsers (Sorry I changed that code a lot so I will not be attaching to my question.).

What I am looking is a good example for createing 3-Column forms using CSS thatworks on all browsers. The layout ofthe form is as follows:

Last Name: _ First Name _ Initials _
Street Number And Name _______________ City _
State / Province: Postal / Zip Code: ____

Etc ....

Answer : How To Create Cross-Browser Three Column CSS Form

I would do something like this

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:

           
           
             <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form</title>
<style type="text/css">
*{margin:0;padding:0;}
fieldset, img{border:none;}
#wrap{width:465px;margin:15px;padding:15px;border:1px solid #ccc;background:#ebebeb;}
.row{clear:both;}
.field{float:left;margin-right:10px;}
.field input{width:140px;}
.clear{clear:both;}
#submit{width:150px;margin-top:20px;}
input:focus{background:#f9f2cf;}
</style>
</head>

<body>
<div id="wrap">
    <form action="test.php">
        <div class="row">
            <div class="field">
                Last Name:<br />
                <input type="text" style="width:230px" />
            </div>
            <div class="field">
                First Name:<br />
                <input type="text" />
            </div>
            <div class="field">
                Initials:<br />
                <input type="text" style="width:50px;" />
            </div>
        </div>
        <div class="row">
            <div class="field">
                Street Number and Name:<br />
                <input type="text" style="width:448px"/>
            </div>
        </div>
        <div class="row">
            <div class="field">
                City:<br />
                <input type="text" style="width:230px;"/>
            </div>
            <div class="field">
                State:<br />
                <input type="text" style="width:50px;"/>
            </div>
            <div class="field">
                Postal / Zip:<br />
                <input type="text" />
            </div>
        </div>
        <div class="row" style="width:460px;text-align:center;">
            <input name="Submit" id="submit" type="button" value="Submit" />
        </div>
    </form>
    <div class="clear">&nbsp;</div>
</div>
</body>
</html>
           
         