css positioning baseline

I would like to have the dropdown at the same baseline level of Btn1-2 and Btn3 above, but within the cell. Basically the opposite as what it is now. What am I missing? Thanks

<table style="width:100%">
    <tr style="border:1px solid #000">
        <td>
            <div style="position:relative">
            <input type="button" value="Bt1" /> 
            <input type="button" value="Bt2" /> 开发者_如何学JAVA
                <div style="position:absolute; top:0; right:0;">
                    <input type="button" value="Btn3" /> <br />
                    <select>
                        <option>Hello</option>
                    </select>
                </div>
            </div>
        </td>
    </tr>
</table>

That's how you should do this:

<table style="width:100%">
    <tr style="border:1px solid #000">
        <td>
            <div style="float:left;">
            <input type="button" value="Bt1" /> 
            <input type="button" value="Bt2" /> 
            </div>
            <div style="float:right;">
            <input type="button" value="Btn3" />                    
                   <select>
                        <option>Hello</option>
                    </select>
            </div>
        </td>
    </tr>
</table>

Set float for the two divs. Here is the demo: http://jsfiddle.net/naveed_ahmad/DnWWy/

Change the div style from position:absolute; to position:relative; which will keep it inside the cell.

You can try this one.

<table style="width:100%">
<tr style="border:1px solid #000">
    <td>
        <div style="position:relative">
        <input type="button" value="Bt1" />
        <input type="button" value="Bt2" />
            <div style="position:absolute; top:0; right:0;">
                <input type="button" value="Btn3" />
                <select>
                    <option>Hello</option>
                </select>
            </div>
        </div>
    </td>
</tr>