13

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)?

rkhff
  • 1,696
  • 2
  • 16
  • 16
  • 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? – Spycho Aug 19 '11 at 10:17
  • Similar to [this question](http://stackoverflow.com/questions/1030793/input-with-displayblock-is-not-a-block-why-not) – Spycho Aug 19 '11 at 10:25
  • Yes, that was what I meant - apologies if that wasn't clear... – rkhff Aug 19 '11 at 10:59

1 Answers1

31

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?

thirtydot
  • 224,678
  • 48
  • 389
  • 349