Aligning text and dropdown within a form through tables - html

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...