I'm having trouble positioning my form elements as desired.
I want the recurrence_interval input field to be below the select (recurrence) input field.
My two radio buttons for 'never' and 'on' should be stacked on top of each other, with the input field for ends_on_date below the 'On' checkbox.
Here is my HTML code:
<div id="dialog" title="Create new appointment">
<form id="df">
<label class="align" for="title">Title</label>
<input type="text" name="title" id="title">
<label class="align" for="when">When</label>
<input type="text" name="when" id="when">
<input id="repeat" type="checkbox">
<label id="repeat_text" for="repeat">Repeat...</label>
<div id="repeat_properties">
<label class="align" for="recurrence">Repeats</label>
<select id="recurrence">
<option value="1">Daily</option>
<option value="7">Weekly</option>
<option value="repeat-x-days">Every x day</option>
</select>
<input id="recurrence_interval" type="text">
<label class="align" for="ends_never">Ends</label>
<input id="ends_never" name="endson" type="radio" title="Ends never" checked="checked">
<label for="ends_never" title="Ends never">Never</label>
<input id="ends_on" name="endson" type="radio" title="Ends never">
<label for="ends_never" title="Ends never">On</label>
<input class="align" id="ends_on_date" type="text">
</div>
</form>
</div>
Here is my CSS code:
.align {
display: inline-block;
float: left;
clear: left;
width: 30%;
text-align: left;
}
input[type="text"], input[type="radio"], select {
display: inline-block;
float: left;
clear: right;
}
#repeat
{
display: inline-block;
float: left;
text-align: left;
clear: left;
}
#repeat_text
{
float: left;
}
Any suggestions on how I can achieve the desired layout?
Edit: View the issue here, especially in Chrome where the fields appear misaligned.