Aligning text and dropdown within a form through tables

Question

I know I am wrong in using tables but this seems to be the most viable option.

I am trying to align text and dropdown in the form. The problem is that the text can be one-line or two-liner and it's hard to give a relative height to it when I want to keep both of them same in the same line.

When I put in the padding for the single line for a perfect align, a text with two line-text ruins it. Can I do something relative that works for both one and two line?

HTML

<table>

<tbody>
<tr>
    <td style="width: 120px;" class="level-heading">
        <div style="position: absolute;">Client Name</div>

    </td>
    <td style="width: 120px">
        <div class="level">
            <select name="ctl00$MainContent$cmbClientName" id="MainContent_cmbClientName" style="width:140px;">
<option selected="selected" value="Select One">Select One</option>

</select>
        </div>
    </td>
    <td style="width: 120px;" class="level-heading">
        <div style="position: absolute;">Business Segment</div>

    </td>
    <td style="width: 120px">
        <div class="level">
            <select name="ctl00$MainContent$cmbBusinessSegment"  id="MainContent_cmbBusinessSegment" style="width:140px;">
<option selected="selected" value="Select One">Select One</option>

</select>
        </div>
    </td>
    <td style="width: 120px;" class="level-heading">Business Segment Category

    </td>
    <td style="width: 130px">
        <div class="level">
            <select name="ctl00$MainContent$cmbBusinessSubGroup" id="MainContent_cmbBusinessSubGroup" class="level-big" style="width:180px;">
<option selected="selected" value="Select One">Select One</option>

</select>
        </div>
    </td>
</tr>



<tr>
    <td style="width: 120px;" class="level-heading">Experience Test From

    </td>
    <td style="width: 120px">
        <div class="level">
            <select name="ctl00$MainContent$cmbFrom"  id="MainContent_cmbFrom" style="height:16px;width:140px;">
<option selected="selected" value="Select One">Select One</option>

</select>
        </div>
    </td>
    <td style="width: 120px;" class="level-heading">Experience Test To

    </td>
    <td style="width: 120px" align="justify">
        <div class="level">
            <select name="ctl00$MainContent$cmbTo" id="MainContent_cmbTo" style="width:140px;">
<option selected="selected" value="Select One">Select One</option>

</select>
        </div>
    </td>
    <td style="width: 120px">
        <span id="MainContent_lblPeriodTo"></span>
    </td>
    <td style="width: 130px"></td>
</tr>
<tr>
    <td colspan="6" style="height: 10px"></td>
</tr>

</tbody>
    </table>

CSS

This is the CSS that relates to the issue mentioned above.

.level-heading {
    font-size: 12px;
    padding-bottom: 12px;
}
.decision-page select {
    font-size: 12px;
}
.fullpage-width {
    width: 896px;
}

Answer 1

Well, you're asking for a world of frustration on the path you're heading, but let me answer your question:

have a look at this fiddle: http://jsfiddle.net/7tyjx/

First, remove the absolute positioning

<td style="width: 120px;" class="level-heading">
    <div>Client Name</div>
</td>

Second, set the vertical alignment on your td's to middle

td {
    vertical-align: middle;
}

Third, remove the padding from the .level-heading

.level-heading {
    font-size: 12px;
}

In the fiddle I've added some borders so you can see how the alignment is working, and given the td's a exaggerated height for the same reason.

Make life easier- try using class names to identify classes of elements and styles, and then move those styles to your stylesheet -- i.e. you've got a style called .level-heading and then you add an inline-style for width. Move that width out of your markup

.level-heading { width: 120px; }

etc...