Formulaires fluides

HTML

<form method="post" class="layout-form layout-form-fluid form-grid-90">
    <fieldset>
        <legend>Identité</legend>
        <p>
            <label for="first-name">Civilité</label>
            <span class="fluid-field"><select class="field-full">
                <option value="1">Mlle</option>
                <option value="2">Mme</option>
                <option value="3">Mauris vitae nulla orci; vitae cursus purus! Suspendisse magna ante, venenatis id dapibus ac, rhoncus nec risus. Sed quis nulla arcu. Sed ligula dolor, eleifend id mattis a, congue ut erat. Cras a rhoncus libero? Vestibulum ante ipsum primis in amet.
</option>
            </select></span>
        </p>
        <p>
            <label for="first-name">Prénom</label>
            <span class="fluid-field"><input type="text" name="first_name" class="field-full" /></span>
        </p>
        <p>
            <label for="last-name">Nom</label>
            <span class="fluid-field"><input type="text" name="last_name" class="field-full" /></span>
        </p>
        <p>
            <label for="email">E-mail</label>
            <span class="fluid-field"><input type="email" name="email" class="field-full" /></span>
        </p>
    </fieldset>
</form>

CSS

*, *:before, *:after {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

label[class*="form-grid-"], [class*="form-grid-"] label {float:left; display:block;}
label.form-grid-90, .form-grid-90 label {width:90px;}

/* Formulaire fluide */
.layout-form-fluid label {float:left;}
    .fluid-field {overflow:hidden; display: block;}
    .field-full, .field-full {width:100%;}

/* Style */
body {font-family:Arial; font-size:14px;}
fieldset {background:#F9F2E7; padding:20px; border:none;}
legend {font-style: italic; font-size:24px; background:#FFF;}