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 */