CSS form layout question

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