Question

Okay so say I have a form element like this:

HTML:

<div class="form-item">
    <label>Current password</label>
    <input id="edit-current-pass" class="form-text" type="password" maxlength="128" size="25" name="current_pass" autocomplete="off">
    <div class="description">lorum ispum</div>
</div>

CSS:

.description {
    clear: both;
}

label {
    float: left;
    line-height: 34px;
    margin-right: 20px;
    width: 140px;
}
form input.form-text {
    background-image: none !important;
    border: 1px solid #E5E5E5;
    height: 30px;
    padding: 1px 2px;
}

Is it possible to make it so the input takes up the remaining width of the line besides the left floated label element?

(FYI the parent container has a width set to it).

I’d like to make this responsive so the form grows and shrinks to the browser window.

Answer 1

I thought this might not be possible with purely HTML/CSS, but I managed it with an additional wrapper around the input box. Check it out on JSFiddle.

HTML

<div class="form-item">
    <label for="edit-current-pass">Current password</label>
    <span class="input">
        <input id="edit-current-pass" type="password" maxlength="128" size="25" name="current_pass" autocomplete="off">
    </span>
    <div class="description">lorum ispum</div>
</div>​

CSS

.description {
    clear: both;
}

label {
    float: left;
    line-height: 34px;
    margin-right: 20px;
    width: 140px;
}
.input {
    display: block;
    border: 1px solid #E5E5E5;
    padding: 1px 2px;
    overflow: auto;
}
.input input {
    display: block;
    float: left;
    background: transparent;
    width: 100%;
    height: 30px;
    border: 0;
    padding: 0;
    margin: 0;
}​