Question

This seems pretty a straight-forward question, but I could not find a specific answer here (or via Google).

I have an APS.Net CheckBoxList inside a overlaid div (emulating a dropdown selection list).

By default the HTML generated for the CheckBoxLIst looks like:

<table id="MainContent_DropDownCheckBoxList4_checkBoxList">
    <tbody><tr>
        <td><input type="checkbox" value="ALL" name="ctl00$MainContent$DropDownCheckBoxList4$checkBoxList$0" id="MainContent_DropDownCheckBoxList4_checkBoxList_0" class="dropdowncheck"><label for="MainContent_DropDownCheckBoxList4_checkBoxList_0" class="dropdownlabel">All</label></td>
    </tr><tr>
        <td><input type="checkbox" value="0" name="ctl00$MainContent$DropDownCheckBoxList4$checkBoxList$1" id="MainContent_DropDownCheckBoxList4_checkBoxList_1" class="dropdowncheck"><label for="MainContent_DropDownCheckBoxList4_checkBoxList_1" class="dropdownlabel">Item 0</label></td>
    </tr><tr>
        <td><input type="checkbox" value="1" name="ctl00$MainContent$DropDownCheckBoxList4$checkBoxList$2" id="MainContent_DropDownCheckBoxList4_checkBoxList_2" class="dropdowncheck"><label for="MainContent_DropDownCheckBoxList4_checkBoxList_2" class="dropdownlabel">Item 1</label></td>
    </tr><tr>
        <td><input type="checkbox" value="2" name="ctl00$MainContent$DropDownCheckBoxList4$checkBoxList$3" id="MainContent_DropDownCheckBoxList4_checkBoxList_3" class="dropdowncheck"><label for="MainContent_DropDownCheckBoxList4_checkBoxList_3" class="dropdownlabel">Item 2</label></td>
    </tr><tr>
        <td><input type="checkbox" value="3" name="ctl00$MainContent$DropDownCheckBoxList4$checkBoxList$4" id="MainContent_DropDownCheckBoxList4_checkBoxList_4" class="dropdowncheck"><label for="MainContent_DropDownCheckBoxList4_checkBoxList_4" class="dropdownlabel">Item 3</label></td>
    </tr>
</tbody></table>

The problem is the individual labels are only the width of the text within then, but I want the entire row to be selectable. Note my control/table has a fixed width, so you do not need to calculate the lengths etc.

All the solutions I have seen suggest using display: block or variations, but that causes the text to appear on the line below the checkbox, even set to 90% width as well that does not work on all browers.

How do I make the label take up the remainder of the line? A JQuery answer is acceptable (even preferable, as the control is heavily JQuery’ed already), but please post a solution that works on all browsers. You can see from the HTML I am already adding a dropdowncheck class to the checkboxes and a dropdownlabel class to the labels via JQuery (if that helps give a specific CSS answer).

Simple solution (based on answer from Henrik):

.dropdowncheck
{
    float: left;

.dropdownlabel
{
    display: block;
}

So long as the checkboxes and labels have classes assigned (i.e. via JQuery), this works fine.

Answer 1

How about setting the label to display:block and giving the checkbox float:left ?

If the text is not horizontally aligned as you want, just set height on the checkbox and give the label an equal line-height.