Позиционирование кнопки внутри div с использованием css

Question

У меня есть некоторый html-код, поэтому:

<div class="ui-tabs-panel">
    <div class="dataTables_wrapper">
        <div>
            <button>Add Whatever</button>
        </div>
    </div>
</div>

Применяемые стили, связанные с позиционированием:

ui-tabs-panel { 
     display: block; 
} 
dataTables_wrapper: {
    clear: both, 
    position: relative;
}  
my_button div: ?  
my_button: ?

Внешний div - это панель вкладок jQuery;средний div - это урезанная таблица данных jQuery.Я хочу, чтобы моя кнопка была выровнена по правому краю и внутри границы вкладки.Я попробовал несколько вещей.Применение этих стилей к самой кнопке:
1. float:right выравнивает по правому краю, но за пределами границы вкладки.
2. position: absolute также выходит за границы вкладки.
3. right: -91%отлично смотрится, когда экран максимально увеличен, но начинает обрезать правый край кнопки, когда я уменьшаю размер.(Кнопка имеет постоянную ширину.)
4. margin-left: 91% делает то же самое.

Я попытался применить float: right к контейнеру div, и он все еще остается вне панели вкладок.

Я мог бы обработать событие resize и пересчитать процентное значение правильного атрибута в нем, но мне показалось, что я обхожу квартал, чтобы пройти по соседству.Какой правильный способ сделать это в CSS?

Answer 1

Если вы хотите использовать float, примените переполнение: скрыто для контейнера:

.dataTables_wrapper{
   overflow:hidden;
}
button{
   float:right;
}

Если вы хотите использовать позиционирование, примените положение: относительно контейнера:

.dataTables_wrapper{
   position:relative;
}
button{
   position:absolute; right:0;
}