Question

I have a form input with a label next to it, like this:

<div id="loginbox">
    <form>
        <div>
            <span>Username</span>
            <input type="text">
        </div>

        <div>
            <span>Password</span>
            <input type="password">
        </div>

        <div>
            <input type="submit" value="Login">
        </div>
    </form>
</div>

Then I have some CSS that sets up the width of the login box and the span fields, like so:

#loginbox {
    border: 1px solid black;
    width: 300px;
}

#loginbox span {
    display: inline-block;
    width: 80px;
    text-align: right;
}

Here is the jsfiddle for this code:

http://jsfiddle.net/7TNNq/

Notice how the input boxes do not span the entire length of the div. How do I get it to expand fully?

Answer 1

See: http://jsfiddle.net/thirtydot/tgGLv/

CSS:

#loginbox {
    border: 1px solid black;
    width: 300px;
}

#loginbox label {
    float: left;
    width: 80px;
}
#loginbox span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 0;
}
#loginbox span input {
    width: 100%;
}

HTML:

<div id="loginbox">
    <form>
        <div>
            <label>Username</label>
            <span><input type="text"></span>
        </div>

        <div>
            <label>Password</label>
            <span><input type="password"></span>
        </div>

        <div>
            <input type="submit" value="Login">
        </div>
    </form>
</div>