select - CSS - Set <div>s with "position: absolute" not to overlap each other -

i have table n columns. each column has predefined width, , inside each column th, there div containing actual header text, , div containint dropdown menu.

this simplified structure of table:

<table>     <tr>         <th>             <div>text</div>             <div><select>...</select></div>         </th>     <tr>     ...     ... </table> 

the predefined width column can cause text splitted in more 1 line. when happens, elements inside th rearrange position, causing misaligment column's select..

what need do, find way have every select aligned each other, possibly anchored bottom of th.

http://jsfiddle.net/sezsz/2/ <- here i've made example of i'm working on.

the 2nd table shows table without style (except th width): notice misalignment between first , second select.

the 1st table, instead, has styles applied. can see, second column text overlapped select.. tryed solve problem playing "position" attribute.. how can tell text take space needs, without knowing how many lines splitted to?

another (minor) thing: i'd set every select take 100% width of parent div, (table 1) dropdown menu right side overlapping table border (1 or 2 px, while in table 2 ok)..

thanks in advance help, hope clear enough, best regards

i believe jsfiddle you're after, right? whole trick use vertical-align: middle on th.