html and css: aligning a select to the right edge of a table

Answer 1

Add clear: both; to your table's CSS. This will clear the float of the div (with the dropdown) above it.

But why don't you just text-align: right; your div, then you don't have to mess with floats and inline divs. That should work as well.

Answer 2

One way would be to add absolute positioning to both divs.

or

Other way would be to use table. For example:

 <table>
    <tr><td>
    <form method="post">
    <div style="float:right;display:inline;">Show Me:
        <select id="ddNumRecords" name="ddNumRecords" onchange="this.form.submit();">
          <option>30</option>
          <option>50</option>
          <option>100</option>
        </select>
    </div>
    </form>
    </td></tr>
    <tr><td>
    <div>
    <div style="float:left; 
                min-height:1px;
                padding:15px 2% 20px;
                position:relative;
                width:96%;"> 
    hello world
    </div>
    </td></tr>
    </table>

or

Add one more div around the div that has float:right. For example:

<form method="post">
<div style="float:left; width:300px">
<div style="float:right;display:inline;">Show Me:
    <select id="ddNumRecords" name="ddNumRecords" onchange="this.form.submit();">
      <option>30</option>
      <option>50</option>
      <option>100</option>
    </select>
</div>
</div>
<div>
<div style="float:left; 
            min-height:1px;
            padding:15px 2% 20px;
            position:relative;
            width:96%;"> 
hello world
</div>

Answer 3

you could make another cell for the table

<table>
<tr>
<td colspan="2">
<div style="float:right;display:inline;">Show Me:
    <select id="ddNumRecords" name="ddNumRecords" onchange="this.form.submit();">
      <option>30</option>
      <option>50</option>
      <option>100</option>
    </select>
</div>
</td
</tr>
<tr>
<td>table head</td>
<td>table head</td>
</tr>
<tr>
<td>content1</td>
<td>ontent2</td>
</tr>
<tr>
<td>content3</td>
<td>content4</td>
</tr>
</table>

this should work.. or you could use css. but this is the fastest way to do it:-? at least until you make/find some css. you could use float left on both divs