When creating a registration form, I decided to use the fieldset element to organize the input fields into two rows.
Now, I am faced with the challenge of adding a checkbox below them. While I could simply use a div for this purpose, I prefer to incorporate it within the existing fieldset.
You can view an example fiddle here.
The specific requirement is to insert a checkbox under the last list item (identified with class fd) and have its label placed beside it.
The desired layout should resemble the following:
label 1 label 2
_______________ _______________
(_______________) (_______________)
label 3 label 4
_______________ _______________
(_______________) (_______________)
(_) label 5
So far, here's the code snippet we are working with:
...
<li class="fd">
<label class="tandc">label 5</label>
<input class="tac" type="checkbox" id="tandc" name="tandc" tabindex="30" autocomplete="off" />
</li>
</ul>
</fieldset>
</form>
Regarding the CSS styling:
.tc {
float: right;
}
.tac {
width: 20px;
margin-bottom: 20px;
}
.tandc {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
color: #ECECEC;
text-decoration: none;
width: 450px;
float: right;
margin-right: 25px;
padding-top: 3px;
}
The issue at hand is that I am only able to position the label above the checkbox rather than beside it. Can anyone provide guidance on how to place the label next to the checkbox without resorting to the use of tables?