What's the best way to format this simple HTML form using CSS?

Question

I have have a simple HTML form with say four input widgets (see below)...two lines with two widgets on each line. However, when this renders it is pretty ugly. I want the whole form to be indented from the edge of the left page say 40px and I want the left edge of the widgets to line up with each other and the right edge of the labels to line up. I also want to be able to specify a minimum distance between the right edge of the first widget and the label of the widget next to it. How would I do this using CSS? Basically so it looks something like:

            Name:  _____________     Common Names:  _____________
         Version:  ____________            Status:  ____________ 

See current un-formatted HTML below:

<form name="detailData">
<div id="dataEntryForm">
<label>
 Name:  <input type="text" class="input_text" name="ddName"/>  Common Names: <input type="text" class="input_text" name="ddCommonNames"><P>
 Version: <input type="text" class="input_text" name="ddVer"/>  Status:  <select name="ddStatus"><option value="A" selected="selected">Active</option><option value="P">Planned</option><option value="D">Deprecated</option>
</label>
</div>
</form>

Answer 1

Basic kickoff example:

<div id="dataEntryForm">
    <div class="entry">
        <label for="ddName">Name:</label>
        <input type="text" class="input_text" id="ddName" name="ddName">
    </div>
    <div class="entry">
        <label for="ddCommonNames">Common Names:</label>
        <input type="text" class="input_text" id="ddCommonNames" name="ddCommonNames">
    </div>
    <div class="entry">
        <label for="ddVer">Version:</label>
        <input type="text" class="input_text" id="ddVer" name="ddVer">
    </div>
    <div class="entry">
        <label for="ddStatus">Status:</label>
        <select id="ddStatus" name="ddStatus"><option value="A" selected="selected">Active</option><option value="P">Planned</option><option value="D">Deprecated</option></select>
    </div>
</div>

with this CSS:

#dataEntryForm {
    width: 600px;
}
#dataEntryForm .entry {
    float: left;
    width: 300px;
}
#dataEntryForm .entry label {
    display: inline-block;
    width: 150px;
    text-align: right;
}

Live demo.

Answer 2

For the text boxes you could do something like this:

.input_text {
      background-color:transparent;
      border-top:none;
      border-left:none;
      border-right:none;
      border-bottom:1px solid #000;
}

The select boxes will be more difficult to style like that, and you may want to look into a Javascript workaround to style it. Something like this would help:

http://www.mypocket-technologies.com/jquery/SelectBoxPlugin/

Answer 3

http://reisio.com/temp/form1.html

Remove clear: left; from the li rule and set width for ul and li if you want two or more side by side.