Form layout in CSS

I am trying to create tableless Form using and tags, im stuck.

I want the form look like this:

I should be able to set the width of textbox, text area and se开发者_运维技巧lect in CSS.

Make each row a <p> containing a <label> and an <input>, both display: inline-block with preset width. (The <label> should be text-align: right)

The buttons can be float: right.

This is a good walk through: http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html

check out working example here: http://jsfiddle.net/bRm3P/2/

<form>
<label>To: <input type="text" /></label>
<label>Subject: <input type="text" /></label>
<label>Message: <textarea></textarea></label>  
<div class="submit-container">    
    <input type="submit" value="submit"/><input type="submit" value="submit"/>
</div>
</form>

<style>
form {
    width: 500px;
}

label {
    display: block;
    text-align: right;
    margin-bottom: 4px;
}

label input,label textarea {
    border: 1px solid #DEDEDE;
    width: 80%;
    vertical-align: top;
}


.submit-container {
    padding-top: 4px;
    text-align: right;
}
</style>

A nice semantic layout would be one of the following:

<ul>
  <li><label>To <input></label></li>
  ...
</ul>

Or with a dl (more common):

<dl>
   <dt><label>To</label></dt><dd><input></dd>
   ...
</dl>

You will find lots of ways to layout the latter if you google for: definition list layout form