CODEWITHSUNDEEP
htmlcss
Ali
Ali

Reputation: 267137

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 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.

Upvotes: 1

Views: 8179

Answers (3)

Eric
Eric

Reputation: 97631

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;
}

Upvotes: 2

Jason Gennaro
Jason Gennaro

Reputation: 34855

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

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

Upvotes: 1

Willem
Willem

Reputation: 723

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.

Upvotes: 1

Related Questions