Question

I have a registration form and used fieldset to order the input fields in two rows.

Now I need to add a checkbox below them. Sure, I could do so with a div, but I want to integrate it into the fieldset.

Here is an example fiddle.

I need to add a checkbox under the last list item (the one with class fd) and beside that, the label for it.

At the end, it should look like this:

   label 1                         label 2
    _______________                 _______________ 
   (_______________)               (_______________)

    label 3                        label 4
    _______________                 _______________ 
   (_______________)               (_______________)


   (_) label 5 

At this point I have the following code:

...
<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>

And as for the CSS:

.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;

}

My problem is that I’m only able to get the label above the checkbox and not beside it. Can anyone tell me how to put the label next to the checkbox? It’s okay to change my HTML, but please avoid using tables.

Answer 1

Not sure what element is styled using the .tc class but I just moved the label after the checkbox and removed the float:right you had for class .tandc and it looks like what you’re trying to explain.

may be this what you’re looking for?

EDIT

updated css

.tandc {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
color: #ECECEC;
text-decoration: none;
width: 450px;
height: 30px;
display:inline-block;
}

html

....
<li class="fd">
<input class="tac"type="checkbox" id="tandc" name="tandc" tabindex="30" autocomplete="off" />
<label class ="tandc">label 5</label>
</li>
</ul>
</fieldset>
</form>

Since you have specific class and id for this <li> element you should be able to position it however you want independently.

EDIT

After seeing your full css I noticed you’ve specified that every input field is displayed as block. That means that no other element can be on the same line as the input field, like the div elements (your checkbox being one of those input fields). What you need to do is specify that this particular input box can have other elements inline with it. You can just add to class .tandc or to id #tandc display:inline-block.