HTML и CSS: выравнивание выбора по правому краю таблицы

Question

Рассмотрим следующий фрагмент HTML. Желаемый эффект - разместить выпадающий список прямо над таблицей.

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

Сказанное выше выглядит так:

таблица и выберите плавающее право http://www.imagechicken.com/uploads/1253124526051538700.png

Вопрос: Как я могу написать свой CSS для достижения позиционирования, как этот макет?

желаемый http://www.imagechicken.com/uploads/1253124791005327900.png

Answer 1

Добавьте clear: both; в CSS вашего стола. Это очистит плавающий элемент div (с раскрывающимся списком) над ним.

Но почему бы вам просто не сделать text-align: right; свой div, тогда вам не нужно возиться с плавающими и встроенными div. Это должно сработать.

Answer 2

вы можете сделать еще одну ячейку для таблицы

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

это должно работать .. или вы можете использовать css. но это самый быстрый способ сделать это: -? по крайней мере, пока вы не сделаете / не найдете немного CSS. вы можете использовать float left на обоих div

Answer 3

Один из способов - добавить абсолютное позиционирование к обоим элементам.

или

Другой способ - использовать таблицу. Например:

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

или

Добавьте еще один div вокруг div, который имеет float: правильно. Например:

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