Fluid input elements

Question

I got this form...

<form method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
    <fieldset>
        <legend>Who are you?</legend>
        <label for="first-name">First name</label><input type="text" name="first_name" required /><br />
        <label for="last-name">Surname</label><input type="text" name="last_name" required /><br />
        <label for="email">E-mail</label><input type="email" name="email" required /><br />
        <input type="button" name="submit1" id="submit1" value="Next" />
        <input type="button" name="clear" id="clear" value="Clear" />
    </fieldset>
</form>

With this CSS…

form {
    margin: 24px 0 0 0;
}

form legend {
    font-size: 1.125em;
    font-weight: bold;
}

form fieldset {
    margin: 0 0 32px 0;
    padding: 8px;
    border: 1px solid #ccc;
}

form label {
    float: left;
    width: 125px;
}

form label, form input {
    margin: 5px 0;
}

I'm looking for an easy way to make the input fields fluid so that the width of input elements is always relative to the width of the fieldset element. In other words, the width of the label (125px) and input element should always be 100% of the width of the fieldset element. Is there an easy way to do this (without adding divs)?

Sollows

Do you mean the input element should use the remaining width (i.e. difference between fieldset width and label width), rather than that the input should be 100% of the width of the fieldset? – Jehol

Similar to this question – Jehol

Yes, that was what I meant - apologies if that wasn't clear... – Sollows

Answer 1

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

You can do this by adding a harmless little span around each input:

<span><input type="text" name="first_name" required /></span>

And this new CSS:

form input {
    width: 100%;
}
form span {
    display: block;
    overflow: hidden;
    padding: 0 5px 0 0;
}

---

You can also do it with display: table, which is usually a better approach: How can I put an input element on the same line as its label?

Wanonah

<span> set to display: block means a <div>, right? – Caitlin

@BairDev: The simple answer is "yes". Semantically they are different, but that doesn't matter too much. – Wanonah