Align a button to top

Question

I am building a webapp in .net using some of the AJAX features; in this case it is TabContainer.

Below is a screenshot of the area I want to play with. The menu on the left is the tabs of TabContainer. The right side is tab's content. I would like to have the "Update PCR" button to be right underneath "Disciplines Affected". The problem is that the left and right side are a part of ONE block, which is TabContainer.

Are there any suggestions to how would I format the CSS of the Button to align right underneath TabContainer's menu? I could add the button as a part of the menu but, then I would have to set the control to AutoPostback, which defeats its purpose in this case in the first place... Any suggestions would be appreciated!

EDIT:

Here is the existing CSS

.ajax_tabController .ajax__tab_tab
{
    background-color: #3c6f91;
    padding: 5px;
    border: 1px solid #ffffff;
    color:#ffffff;
    border-left: 3px solid #5AB0DB;
}

.ajax_tabController .ajax__tab_hover .ajax__tab_tab
{
    background-color:#5AB0DB;
    text-decoration:none;
}

.ajax_tabController .ajax__tab_active .ajax__tab_tab
{
    background-color:#5AB0DB;
    text-decoration: underline;
}

Also, there is CSS that overrides some settings to make TabContainer Vertical instead of Horizontal. I know, that there is a property .UseVerticalStripPlacement but it messes up with the height of the control and throws a JavaScript error.

.ajax__tab_header
        {
            float: left;
        }
        .ajax__tab_body
        {
            margin-left: 160px;
        }
        .ajax__tab_outer
        {
            display: block !important;
        }
        .ajax__tab_tab
        {
            width: 210px;
            height: auto !important;
        }

Answer 1

It's going to be a bit hit and miss, but try something along the lines of:

.updatePcrButton {
    position: absolute;
    top: 100px;   /* These will be whatever the measurement is to */
    left: 5px;    /* be directly under the last element */
    z-index: 99;  /* Arbitrary amount to put it above any other elements */
}

This is pretty messy to be honest - it relies on your not changing the position of the control thereafter.

Perhaps a better way would be to add an extra tab to the TabContainer and handle any Tab clicks yourself.

-- Edit -- May be more useful --

Nikita, I had completely forgotten about this as it was in an old Classic ASP app of mine, but you could try these two JS functions that are probably more useful to you:

function curTop(obj){
rv = 0;
while(obj) {
    rv += obj.offsetTop;
    obj = obj.offsetParent;
}
return rv;
}
function curLeft(obj){
rv = 0;
while(obj) {
    rv += obj.offsetLeft;
    obj = obj.offsetParent;
}
return rv;
}

They pull the position from the specified object. If you add the height of the button that you want to position under then you may find this improves the location for you and prevents any funny business with CSS.

Kind regards, Westie.

Answer 2

You need to position the top of the button relative to the bottom of the tab elements. This can be done with jquery. See How to position one element relative to another with jQuery?