CSS Grid System for Forms (Multi-Column)

Question

For future reference here is the final result with pixel perfect precision:

The CSS code:

._25 {
    width: 21%;
    display:          


        

Answer 1

Something like this may help. This is how I did it on a form. It will take some fine tuning though to make it work at your desired width. This might help you get started though.

The CSS:

.contact ul {margin:0; padding:0; list-style:none;}
.contact li {margin-bottom:10px; overflow:hidden;}
.contact label {display:block; margin-bottom:2px;}
.contact label span {color:#999;}
.contact .input {width:592px; border:1px solid #E0E0E0; background:#F6F6F6;}
.contact select.input {border:1px solid #E0E0E0; background:#F6F6F6;}
.contact .third {float:left; width:193px; margin-right:10px;}
.contact .third .input {width:185px;}
.contact .half {float:left; width:294px; margin-right:10px;}
.contact .half .input {width:286px;}
.contact .half select.input {width:294px;}
.contact .omega {margin-right:0;}

The HTML:

    

        

            

                Name:
                
            
        
        

            Address:
            
        
        

            

                City:
                
            
            

                State:
                
            
            

                Zip: