Div in unordered list - good practice?

I want to make a form which looks like this:

Column A      Column B
1   Textbox AA    Textbox BB
2   Textbox AA    Textbox BB

I've coded it like this:

  
                 
                    
                     
                     

                    
                     
                    A  
                    B   
                     

                    
                     1 
                     M 
                     I 
                     

                     
                     2 
                     M 
                     I 
                      

                     
                    TW  
                     KG  
                     LBS
                      
                
                      
              

CSS:

```
form{
padding:3px 0;
font-family: Georgia, arial, serif;
}

ul {
list-style: none;
}

ul li {
clear:both;
margin:0px;
padding:2px 0px;
vertical-align: middle;
}

input{
font-size: 1em;
margin: 5px;
padding: 5px 8px;
border: solid 1px #E5E5E5;
outline: 0;
width: 100px;
}

input:focus {
border: solid 1px #8CDED7;
}

label {
margin: 2px;
padding: 2px;
text-align: right;
font-size: 1em;
text-shadow: 0px 1px 0px #e5e5ee;
display: inline-block;

}

label, input, h4 {
letter-spacing: 1.5px;
line-height: 20px;
font-family: Georgia, 'Times New Roman';
text-transform: uppercase;
}

.field {
float: left;
display:inline-block;
width: 200px;
vertical-align: middle;
}
.head {
padding-top: 5px;
}

.er {
font-size: 1em;
margin-right: 10px;
padding: 8px;
background: #CC0000;
color: #F7F7F7;
float:right;
}

.cv {
float: left;
}
input[type=submit]{
margin-top: 35px;
padding: 9px;
width: auto;
text-align: center;
cursor:pointer;
font-family: Georgia, arial, serif;
font-size: 1em;
color: #56

Divs of any kind are a bit of a "lesser evil" -- they carry no semantic info, and should be used only when (1) you need an element there and (2) there's no semantic equivalent.

In this case, you do have a semantic equivalent. You have rows, columns, headers...data that must be arranged in those rows/columns and have those headers or it doesn't make sense...what you have here is a bona fide table. And it should be coded as one, rather than as a list of divs. ("Tables bad, CSS good" applies to layout tables, not tables in general. If you have tabular data, putting it in a table just makes sense.)

StackExchange Code Review Q#5686, answer score: 13