Question

Consider the following HTML snippet. The desired effect is to have a dropdown be positioned right above a table.

<!-- this is actually in a proper CSS class, not inline-->
<div style="float:left; 
            min-height:1px;
            padding:15px 2% 20px;
            position:relative;
            width:96%;"> 

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

The above renders like this:

table and select float right http://www.imagechicken.com/uploads/1253124526051538700.png

Question: How can I write my CSS to achieve positioning like this mockup?

desired http://www.imagechicken.com/uploads/1253124791005327900.png

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.