animate div width styled as table-cell

Question

I've created 2 columns. The 2nd is 240px wide and the 1st takes all available width.

The below displays fine in IE8 & FF3.6:

/*My Styles*/
div.table { display:table; border-collapse: collapse; table-layout:fixed; width:100%; border-spacing:0; padding:0; margin:0;}
div.cell  { display:table-cell; overflow:hidden;vertical-align:top;}


<div class="table">    
        <div class="cell" style="width:100%">
            <div id="tblWFWrap" class="tblWrap">
                <div id="tblWF" style="overflow:hidden">
                    <!--Content-->
                </div>
            </div>
        </div>

        <div id="wfCol" class="cell" style="width:240px;">
            <div id="ulWF" class="tblWrap" style="width:240px">
                <!--Content-->
            </div>
        </div>        
</div>

The problem is that I wish to animate the width of the 2nd cell from 240px to 0. Both browsers fail to display the 2nd column during the animation. (It runs off the screen as if the table layout was auto instead of fixed)

I've been using jQuery 1.4 to do the animation though I'm open to a custom written Javascript implementation if this is a bug in jQuery.

My jQuery code is basically:

$("#wfCol").animate({ width: 0 });

I'd greatly appreciate any help animating this thing :)

Answer 1

Just remove the 100% width delcaration, the <div> will expand to the width by default and not give the behavior you're talking about:

div.table { display:table; border-collapse: collapse; table-layout:fixed; border-spacing:0; padding:0; margin:0;}

Answer 2

I believe I've got a work around. For some reason animating maxWidth instead of width works.

So:

<div id="wfCol" class="cell" style="width:240px; max-width:240px">
        <div id="ulWF" class="tblWrap" style="width:240px">
            <%=DashboardController.GetWorkflowString()%>
        </div>
    </div>

and

$wfCol.animate({ maxWidth: 0 });

Works... Wierd but I'll take it :)