Floating form elements - html

Question

Essentially I'm trying to float, most of the list item elements horizontally with with the input underneath the label. Here is a template of what I'm trying to achieve.
I've included some of the code here:
<div>
<label for="headline">Headline: </label>
<input type="text" name="headline" value="Milestone" maxlength="50"size="55">
<br>
<div class="dates clearfix">
<label for="effect_date">Date of Effect:</label>
<input type="text" name="effect_date">
<label for="end_date">End Date (opt):</label>
<input type="text" name="end_date">
<label>Date Visible:</label>
<input type="radio" name="is_date_visible" value="2012">
<label for="is_date_visible_yes">Yes</label>
<input type="radio" name="is_date_visible">
<label for="is_date_visible_no">No</label>
<br>
<label>Administrative:</label>
<input type="radio" name="is_adminis" value="1">
<label for="is_admin_yes">Yes</label>
<input type="radio" name="is_adminis">
<label for="is_admin_no">No</label>
</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
And the CSS:
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
div.dates {
}
.dates label {
display: block;
color: #2c93d5;
font-size: 15px;
margin-bottom: 5px;
}
.dates input {
display: block;
}
​.dates label, .dates input {
float: left;
}
I've tried various things with the CSS all to no avail. Essentially I can't get the inputs to drop below the labels and I can't line them all up they usually come out staggered from the top.
I also have a fiddle link I've been working on:
http://jsfiddle.net/vjDEq/
Thanks for any help.

Answer 1

Here's something similar, without using floats:
http://jsfiddle.net/vjDEq/19/
HTML
<div>
<label for="headline">Headline: </label>
<input type="text" id="headline" name="headline" value="Milestone" maxlength="50"size="55">
</div>
<div class="dates">
<label for="effect_date">Date of Effect:
<input type="text" name="effect_date">
</label>
<label for="end_date">End Date (opt):
<input type="text" name="end_date">
</label>
<fieldset>
<legend>Date Visible:</legend>
<label for="is_date_visible_yes">
<input type="radio" name="is_date_visible" id="is_date_visible_yes" value="yes">
Yes
</label>
<label for="is_date_visible_no">
<input type="radio" name="is_date_visible" id="is_date_visible_no" value="no">
No
</label>
</fieldset>
<fieldset>
<legend>Administrative:</legend>
<label for="is_admin_yes">
<input type="radio" name="is_adminis" id="is_admin_yes" value="1">
Yes
</label>
<label for="is_admin_no">
<input type="radio" name="is_adminis" id="is_admin_no" value="0">
No
</label>
</fieldset>
</div>
​
CSS
#headline {
margin-bottom: 1em;
}
label {display: block;}
.dates label {
color: #2c93d5;
font-size: 15px;
margin-bottom: 5px;
}
.dates input {
display: block;
}
.dates fieldset input {
display: inline;
}
.dates label, .dates fieldset {
display: inline-block;
margin-right: 2em;
}
.dates fieldset label {
margin-right: 1em;
}
Instead of floats, the labels wrap the inputs and are set to inline-block. The radio buttons should be in a fieldset. Note that jsfiddle is adding normalize.css, which removes borders/margins/padding from the fieldset and legend. You have the option of floating the Administrative fieldset to the right if your layout demands it.