Positioning tabs in TabContainer

Question

I'm working with ajaxtoolkit:TabContainer .

I need to add two tabs (which i can do) but i need one of the tab headers in the far left and the other in the far right.

I've been playing with CSS ( float:left; etc; ) but i can't separate them. They always show themselves glued together one after the other.

Is it possible to separate the tab headers?

EDIT:

As @1stein commented i could use

.ajax__tab_header :nth-child(2) { float: right !important; } 

and that will do the trick. The problem is, this solution does not work in IE8 which is the browser i'm targeting. Are there any workarounds for this?

Answer 1

You may use this style (doesn't works in IE below 9th version):

.ajax__tab_header :nth-child(2)
{
    float: right !important;
}

Or you can apply style via javascript (right below the ScriptManager):

<script type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

    function pageLoaded(sender, args) {
        $get("<%= TabPanel2.ClientID %>_tab").setAttribute("style", "float:right");
    }
</script>

Where the TabPanel2 is ID of TabPanel which you need to move right.

Answer 2

=D Selectivizr

Check out this js library... it will fix your css selector issue