How to make a <label> stretch the entire length of its container <p>?

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 Sm开发者_开发问答ith'. 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.

Use overflow: hidden, along with floating controls.

http://jsfiddle.net/Eric/br84k/

label {
    display: block;
    overflow: hidden;
    line-height: 20px;
}

input, img {
    float: left;
    display: block;
    height: 20px;
}

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

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

label {
    display: block;
}

Will give it a width of 100% unless otherwise specified.

EDIT:

Making the label a block level element with css does cause some validation errors I do think, as block level elements should not be placed in <p /> tags. Consider an alternative for the <p /> tag if you implement this, a <div /> will do just fine here.