Organize Check Boxes Options

[mtber]

I am trying to find a way to separate checkboxes from their text. So what i want is to have all of the text boxes in a column on the left all alighned the same and then to have the text on the right aligned the same. Is there anyway to do this. I posted an Example of my code below.

CODE

<p><input type="checkbox" name="2a"/><font class="numbers">2a.</font> Text goes here</p>
<ul>
<li><input type="radio" value="Y" name="2a" class="select">YES</input></li>
<li><input type="radio" value="N" name="2a" class="select">NO</input></li>
<li><input type="radio" value="B" name="2a" class="select">BOTH</input></li>
<li><input type="radio" value="O" name="2a" class="select">OMITTED</input></li>
</ul>

[Deirdre's Dad]

Input tags really don't work that way. They are self-closing. Since there is no closing tag, you cannot put text between them.

Now, browsers are designed to make sense of bad HTML, so you might get something that looks correct, but in the long run it may give you trouble. The typical thing to do is put a <label></label> element next to an input element.

For the sake of alignment, you would use CSS to give all your input elements the same width. That would ensure that the labels all appeared at the same horizontal coordinate.

Is there a reason for using the <ul> element, other than making each input appear on a separate line? There are better solutions using CSS.

[Deirdre's Dad]

This will work, for example:

CSS

CODE

<style type="text/css">
    input.select {
        width: 30px;
        float: left;
        clear: both;
        display: block;
    }
    label.select {
        display: block;
    }
</style>

HTML

CODE

<input type="radio" value="Y" name="2a" class="select"><label class="select">YES</label>
<input type="radio" value="N" name="2a" class="select"><label class="select">NO</label>
<input type="radio" value="B" name="2a" class="select"><label class="select">BOTH</label>
<input type="radio" value="O" name="2a" class="select"><label class="select">OMITTED</label>

This post has been edited by Deirdre's Dad: Oct 15 2009, 04:00 PM