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:

             &lt;form id="deps" name="deps" action="" method="POST"&gt;  
                 &lt;ul&gt;
                    &lt;li&gt;
                    &lt;span class="er"&gt;&amp;nbsp;&lt;/span&gt;
                    &lt;/li&gt; &lt;br /&gt;

                    &lt;li&gt;
                    &lt;div class="field"&gt;&amp;nbsp;&lt;/div&gt;
                    &lt;div class="field cv"&gt;&lt;label for="met"&gt;A&lt;/label&gt;  &lt;/div&gt;
                    &lt;div class="field cv"&gt;&lt;label for="eng"&gt;B&lt;/label&gt; &lt;/div&gt;  
                    &lt;/li&gt; &lt;br /&gt;

                    &lt;li&gt;
                    &lt;div class="field head"&gt; &lt;label for="bd"&gt;1&lt;/label&gt; &lt;/div&gt;
                    &lt;div class="field"&gt;&lt;input type="text" name="bdmm" id="bdmm" /&gt; &lt;label for="bdmm"&gt;M&lt;/label&gt; &lt;/div&gt;
                    &lt;div class="field"&gt;&lt;input type="text" name="bdinch" id="bdinch" /&gt; &lt;label for="bdinch"&gt;I&lt;/label&gt; &lt;/div&gt;
                    &lt;/li&gt; &lt;br /&gt;

                    &lt;li&gt; 
                    &lt;div class="field head"&gt; &lt;label for="sd"&gt;2&lt;/label&gt; &lt;/div&gt;
                    &lt;div class="field"&gt;&lt;input type="text" name="sdmm" id="sdmm" /&gt; &lt;label for="sdmm"&gt;M&lt;/label&gt; &lt;/div&gt;
                    &lt;div class="field"&gt;&lt;input type="text" name="sdinch" id="sdinch" /&gt; &lt;label for="sdinch"&gt;I&lt;/label&gt; &lt;/div&gt;
                    &lt;/li&gt;  &lt;br /&gt;

                    &lt;li&gt; 
                    &lt;div class="field head"&gt;&lt;label for="tw"&gt;TW&lt;/label&gt;  &lt;/div&gt;
                    &lt;div class="field"&gt;&lt;input type="text" name="twkg" id="twkg" /&gt; &lt;label for="twkg"&gt;KG&lt;/label&gt; &lt;/div&gt; 
                    &lt;div class="field"&gt;&lt;input type="text" name="twlbs" id="twlbs" /&gt; &lt;label for="twlbs"&gt;LBS&lt;/label&gt;&lt;/div&gt;
                    &lt;/li&gt;  &lt;br /&gt;
                &lt;/ul&gt;
                    &lt;input type="submit" value="Calculate" onclick="getText();" /&gt;  
              &lt;/form&gt; 


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: #565463;
    background: #8CDED7;
    border: 2px solid #8CDED7;
    text-shadow: 0px 1px 0px #e5e5ee;
}


This works fine as I want: http://jsfiddle.net/4kWdQ/. But I would like to know, if putting a div in an unordered list is good practice or not? And anyway I can improve the CSS code?
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.)