Div in unordered list - good practice?

Question

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:

             <form id="deps" name="deps" action="" method="POST">  
                 <ul>
                    <li>
                    <span class="er">&nbsp;</span>
                    </li> <br />

                    <li>
                    <div class="field">&nbsp;</div>
                    <div class="field cv"><label for="met">A</label>  </div>
                    <div class="field cv"><label for="eng">B</label> </div>  
                    </li> <br />

                    <li>
                    <div class="field head"> <label for="bd">1</label> </div>
                    <div class="field"><input type="text" name="bdmm" id="bdmm" /> <label for="bdmm">M</label> </div>
                    <div class="field"><input type="text" name="bdinch" id="bdinch" /> <label for="bdinch">I</label> </div>
                    </li> <br />

                    <li> 
                    <div class="field head"> <label for="sd">2</label> </div>
                    <div class="field"><input type="text" name="sdmm" id="sdmm" /> <label for="sdmm">M</label> </div>
                    <div class="field"><input type="text" name="sdinch" id="sdinch" /> <label for="sdinch">I</label> </div>
                    </li>  <br />

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

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?

Answer 1

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.)

Answer 2

And to add to cHao's comment, also using the table for your purpose will help in providing a construct that will give you some predefined spacing or cells to work with that you can add padding/marging via css classes instead of having to add extraneous tags like <br />

A goal I try to set is to have the least or optimal html markup possible so it's clean and to have the css define the look and feel. Hope this helps.