Center Align Horizontal Accordion in IE (dynamic widths)

Question

I'm trying to figure out how to center a horizontal accordion with no width given in Internet Explorer 6 and 7. I'm working in XHTML 1.0 Strict. In Webkit and Mozilla its just display:table. I've tried everything I can think of and anything one might LMGTFY me for... but it's just not working.

I've posted the example at: http://ableobject.com/horaccordion.html

Here is the code:

HTML:

<div id="container">
    <div class='menuContainer'>
        <a href="#">Top-level 1</a>
    </div>
    <div class='menuContainer'>
        <a href="#">Top-level 2</a>
        <div class='menu'>                         
                <a href="#">Bottom Level A1</a>
                <a href="#">Bottom Level A2</a>
                <a href="#">Bottom Level A3</a>
                <a href="#">Bottom Level A4</a>
            </div>
    </div>
    <div class='menuContainer'>
        <a href="#">Top-level 3</a>
            <div class='menu'>
                <a href="#">Bottom Level B1</a>
                <a href="#">Bottom Level B2</a>
            </div>
    </div>
    <div class='menuContainer'>
        <a href="#">Top-level 4</a>
    </div>
</div>

CSS:

#container {
    margin: 0 auto 0 auto; 
    text-align: center;
    display: table;
}

.menuContainer {
       margin: 0;
       padding: 0;
       float: left;
       height: 32px; /* For testing */
       font-family: helvetica;
       font-size: 18px;
       clip: auto; overflow: hidden;
}
.menu {
       height: 32px; /* For testing */
       clip: auto; overflow: hidden;
       float: left;
}
a, a:link, a:hover, a:visited, a:active {
       color: black;
       text-decoration: none;
       padding: 12px;
       font-weight: 700;
       float: left;
       color: #222;
}

.menu a, .menu a:link, .menu a:hover, .menu a:visited, .menu a:active {
   color: black;
   text-decoration: none;
   padding: 12px;
   font-weight: normal;
   float: left;
}

JQuery/Javascript:

        if( jQuery.support.opacity == true ) {
      $(".menuContainer a").hover( 
              function(){$(this).animate ({ opacity: 0.7 }, 200 );},
              function(){$(this).animate ({ opacity: 1 }, 600 );}
        );}

      else {
       $('.menuContainer a').hover( 
        function(){$(this).css('color', '#999');},
           function(){$(this).css('color', '#000');}
       );}

// Accordion Courtsey of Patrick @ StackOverflow : http://stackoverflow.com/users/113716/patrick 

     var $currentMenuContainer = $('#someFictionalElement');
     var $previousMenuContainer = null;

    // Iterate through each .menu element, setting the full width of each menu to a 'custom'
    //        attribute called 'fullWidth'. Since the full width should never change, this
    //        makes it easy to recall it quickly. You could use global variables instead.
    // After setting 'fullWidth', it then collapses each menu and title.
        $(".menu").each(function() {
            var $theMenu = $(this);
            var $theMenuContainer = $theMenu.parent();
            $theMenu.attr({fullWidth: $theMenu.width()});
            var menuContainerWidth = $theMenuContainer.width() - $theMenu.attr('fullWidth') + 3;  // Add a few pixels for firefix
            $theMenu.css({width: 0});
            $theMenuContainer.css({width: menuContainerWidth});
        });

        $(".menuContainer a").click(
            function() {
    // Set the current and previous elements properly
                $previousMenuContainer = $currentMenuContainer;
                $currentMenuContainer = $(this).parent();
                var $previousMenu = $previousMenuContainer.find('.menu');
                var $currentMenu = $currentMenuContainer.find('.menu');

    // Collapse the previous menu
                $previousMenu.animate({ width: 0 }, {duration: 480, queue: false} );

    // Subtract the width of the previous menuContainer's menu from the menuContainer (only if its menu is displayed)
                if($previousMenu.width() > 0) $previousMenuContainer.animate({width: ('-=' + $previousMenu.attr('fullWidth'))}, 500);

    // Expand the current menu and its menuContainer if it's not showing
                if($currentMenu.width() == 0) {
                    // Increase the menuContainer width by the full width of its menu
                    $currentMenuContainer.animate({width: ('+=' + $currentMenu.attr('fullWidth'))}, 480);
                    // Increase the menuContainer to its full width
                    $currentMenu.animate({ width: $currentMenu.attr('fullWidth') }, 500);
                }
        });
    });

Answer 1

<center>CONTENT</center>

If it is good enough for google it propably is good enough for you. (Unless offcourse you are forced to deliver a 100% standards compliant site which is not even allowed to produce warnings)