views:

30

answers:

0

I'm displaying text inputs next to some label text in a fieldset. I'd like the baseline of the text in the text inputs to line up with the baseline of the label text. I could set a fudge factor padding-top for my .label elements but the content of my .value elements may contain read-only text and this would screw up the label/value baseline alignment for those fields. I also suspect the different fudge factors would be required for different browsers because of height differences between input fields across browsers.

Does anyone have any ideas how I can get my label and input text baselines to align? My label text may span multiple lines and as such I'd like any solution to take this into account.

You can see a live example the following code at http://jsbin.com/enobe3.

CSS

* {
    font-family: sans-serif;
    font-size: 13px;
}

.field {
    clear: left;
    padding-top: 5px;
}

.label {
    float: left;
    width: 90px;
}

.value {
    margin-left: 90px;
    padding-left: 10px;
}

HTML

<fieldset>
    <div class="field">
        <div class="label">A short label</div>
        <div class="value">Some text</div>
    </div>
    <div class="field">
        <div class="label">A long long long long long long long wrapping label</div>
        <div class="value">Some text</div>
    </div>
    <div class="field">
        <div class="label">A short label</div>
        <div class="value"><input value="Some text"/></div>
    </div>
    <div class="field">
        <div class="label">A long long long long long long long wrapping label</div>
        <div class="value"><input value="Some text"/></div>
    </div>
</fieldset>