CSS form layout question - html

Question

I have the following element on my form:
<li>
<label class="fixed" for="Interests">Program genre interests:</label>
<label for="Sports"><%=Html.CheckBox("Sports")%>Sports</label>
<label for="Comedy"><%=Html.CheckBox("Comedy")%>Comedy</label>
<label for="News"><%=Html.CheckBox("News")%>News</label>
<label for="Drama"><%=Html.CheckBox("Drama")%>Drama</label>
<label for="Reality"><%=Html.CheckBox("Reality")%>Reality</label>
<label for="Kids"><%=Html.CheckBox("Kids")%>Kids'</label>
</li>
The "fixed" class simply makes the label an inline block with a fixed width (to align the fields properly). The problem shows up if the check boxes are forced to wrap for whatever reason, because the second row of check boxes starts back underneath the label, rather than left aligned with the first row of check boxes.
I'm trying really hard to minimize the necessary markup / styling here, but I'm not sure the most efficient way to achieve the alignment I'm looking for. What I'm getting is:
label text here: cb1, cb2, cb3, cb4
cb5, cb6, cb7, etc...
And what I want is
label text here: cb1, cb2, cb3, cb4
cb5, cb6, cb7, etc...
What is the shortest / simplest html / css to achieve this?
Edit: I should note that I'm trying to avoid using floats because the rest of the page will contain some floated elements and I've had issues with nested floats before.

Answer 1

I'm affraid the only way to achieve this is to wrap all your checkboxes into a div element:
<li>
<label class="fixed" for="Interests">Program genre interests:</label>
<div class="checkboxes-wrapper">
<label for="Sports"><%=Html.CheckBox("Sports")%>Sports</label>
<label for="Comedy"><%=Html.CheckBox("Comedy")%>Comedy</label>
<label for="News"><%=Html.CheckBox("News")%>News</label>
<label for="Drama"><%=Html.CheckBox("Drama")%>Drama</label>
<label for="Reality"><%=Html.CheckBox("Reality")%>Reality</label>
<label for="Kids"><%=Html.CheckBox("Kids")%>Kids'</label>
</div>
</li>
And use the following CSS:
.fixed, .checkboxes-wrapper { float:left }
.checkboxes-wrapper { width: 200px; } /* 200px should be replaced by whatever size you want it to be */

Answer 2

you could do something like this, assuming by "not using floats" you mean "not using float:" css. if by "floated" you mean "absolutely positioned", just tell me and I'll remove the answer.
<style type="text/css">
ul.Container
{
list-style-type:none;
display:block;
position:relative;
width:400px;
}
li.Label
{
display:block;
position:absolute;
width:150px;
left:0px;
top:0px;
}
li.Checkboxes
{
display:block;
position:absolute;
width:250px;
left:150px;
top:0px;
}
</style>
<ul class="Container">
<li class="Label">
program genre interests
</li>
<li class="Checkboxes">
<input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test
</li>
</ul>
though you'll have to wrap each checkbox and label into some inline tag, otherwhise you might end up with a break between a checkbox and it's label.

Answer 3

How about this:
*{margin:0;padding:0}
li {text-indent:-170px;margin-left:340px;overflow:show;display:block;}
.fixed {display:inline-block;width:160px;}
label {display:inline-block;width:80px;}
Works for me in firefox.
You'll need to play with the values a bit to get it to work with any margins and padding you already have set on the li's

Answer 4

I have always used an ordered list element to mark up each form element, and extend this for boolean lists such as yours. it gives the advantage of grouping each label/boolean input while only adding semantic markup to the mix - it actually benefits users without stylesheets to have the forms marked up in this way ...
<li>
<label for="...">Filter by date</label>
<input id="..." name="..." tabindex="1" type="text" value="" />
</li>
<li
<label for="...">Filter by status</label>
<ol>
<li class="containsBoolean">
<label for="...">Online</label>
<input id="..." name="..." type="checkbox" value="" />
</li>
<li class="containsBoolean">
<label for="...">Paused</label>
<input id="..." name="..." type="checkbox" value="" />
</li>
<li class="containsBoolean">
<label for="...">Disabled</label>
<input id="..." name="..." type="checkbox" value="" />
</li>
<li class="containsBoolean">
<label for="...">Deleted</label>
<input id="..." name="..." type="checkbox" value="" />
</li>
</ol>
</li>
<li class="containsBoolean">
<label for="...">Show Deleted</label>
<input id="..." name="..." type="checkbox" value="" />
</li>
<li>
<button type="submit">Filter</button>
</li>
It is then easy to address each list node and use a common class for the boolean input styling ...
form fieldset ol li {
margin-bottom:24px;
position:relative;
}
form fieldset ol li.containsBoolean input[type=checkbox],
form fieldset ol li.containsBoolean input[type=radio] {
left:0;
position:absolute;
top:0;
}
form fieldset ol li.containsBoolean label {
line-height:24px;
margin-left:30px;
}