Positioning a button inside a div using css

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?

Rather than describing your css, why not just include the actual css? — James Montagne, Feb 24 '12 at 20:56

score 17 · Accepted Answer · answered Feb 24 '12 at 21:22

17

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

answered Feb 24 '12 at 21:22

Makc

1,012
12
16

Thanks Makc, that put me on the right track. I added overflow:hidden to the ui-tabs-panel tab and that did the trick. The other one has a datatable inside it as well, so perhaps that's why it didn't work. – BobRodes Feb 24 '12 at 21:45
1

http://colinaarts.com/articles/the-magic-of-overflow-hidden/ to learn more about float and overflow hidden, goodluck! – Makc Feb 24 '12 at 22:41
Another SO thread, “How can I apply CSS on all buttons which are present in that page?” at http://stackoverflow.com/questions/3540380/how-can-i-apply-css-on-all-buttons-which-are-present-in-that-page offers a more versatile approach that works without the need to assign an ID or style to the button. – David A. Gray Jan 28 '16 at 02:36

Positioning a button inside a div using css

1 Answers1