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

• input: Thanks for the feedback. I thought so, I would use a table, but wasn't sure it would apply here for some odd reason.
• Marnen Laibow-Koser: Like any other tag, <table> should only be used where it is semantically appropriate. In this case, the data is tabular, so it's absolutely appropriate!
• Kyle Hayes: Sadly, tables have gotten such a bad rap the past few years that so many folks don't immediately think of it when it is actually needed! Good question and good answer! (sadly, a table had not come to mind when I reviewed the code).

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.

• cimmanon: It should also be noted that having <br /> elements between the <li> elements is invalid HTML. The only child element allowed for <ul> is <li>.