What is the best way to style a list of checkboxes

Question

What I'd like to achieve is a layout like this

some label  [ ] checkbox 1
            [ ] checkbox 2
            [ ] checkbox 3
            [ ] checkbox 4

[ ] represents a checkbox

What markup and CSS would be best to use for this? I know this would be easy to do with a table I'm wondering if this is possible with divs

Answer 1

I would use this markup:

<div id="checkboxes">
  <label>some label</label>
  <ul>
    <li><input type="checkbox"> checkbox 1</li>
    <li><input type="checkbox"> checkbox 2</li>
    <li><input type="checkbox"> checkbox 3</li>
    <li><input type="checkbox"> checkbox 4</li>
  </ul>
</div>

and these styles:

#checkboxes label {
  float: left;
}
#checkboxes ul {
  margin: 0;
  list-style: none;
  float: left;
}

Tables aren't evil, but they're used for the wrong reasons more often than not. They make for bigger html-files (bad for performance and bandwidth), usually with a more cluttered html-structure (bad for maintainability). As for tabular data however, they are excellent.

Answer 2

This very semantic HTML:

<fieldset class="checkboxgroup">
    <p>some label</p>
    <label><input type="checkbox"> checkbox 1</label>
    <label><input type="checkbox"> checkbox 2</label>
    <label><input type="checkbox"> checkbox 3</label>
    <label><input type="checkbox"> checkbox 4</label>
</fieldset>

And this fairly simple CSS:

.checkboxgroup{
    width: 20em;
    overflow: auto;
}
.checkboxgroup p{
    width: 7em;
    text-align: right;
}
.checkboxgroup label{
    width: 12em;
    float: right;
}

Adjust widths as needed.

The proper way to do this really is to replace the p element in my HTML with a legend element, but this won't style the way you want it to without some pretty ugly CSS.