Question

I have some html code, so:

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

The applied styles that have to do with positioning are:

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

The outside div is a jQuery tabs panel; the middle div is a stripped-down jQuery datatables table. I want my button to be right-aligned, and inside the tab border. I’ve tried a few things. Applying these styles to the button itself:
1. float:right right-aligns, but outside the tab border.
2. position: absolute goes outside the tab border as well.
3. right: -91% looks great when the screen is maxed, but starts cutting off the right edge of the button as I resize smaller. (The button has a constant width.)
4. margin-left: 91% does the same thing.

I tried applying a float: right to the container div, and that still sticks it outside the tab panel.

I could handle the resize event, and recalculate the percentage value of the right attribute in it, but that strikes me as going around the block to get next door. What’s the right way to do this in css?

Answer 1

If you want to use float, then apply overflow:hidden to container:

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

If you want to use positioning, then apply position:relative to container:

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