Question

I have the following code in my html:

<li>
    <p>
        <input type="checkbox" id="is_selected"/>
        <img src="http://site.com/images/user44.png" alt=""/>
        <label for="is_selected">Bob Smith</label>
    </p>
</li>

When I render this, what happens is that there’s a lot of white space to the right side of the label ‘Bob Smith’. The user must click directly on ‘Bob Smith’ to toggle the checkbox, if he clicks to the right at the empty space, nothing happens.

How can I do it so the label ‘Bob Smith’ stretches to fill the entire space to the right?

I’ve tried: width: 100% on the label but it didn’t have any effect.

Answer 1

Give your label a display:inline-block; and then set a width to fill the remainder of the space.

http://jsfiddle.net/jasongennaro/qWSas/