Animate width of container when children expand
<p>I'm trying to build a gallery using javascript/jquery where the full-sized images slide out from the right. I managed to get that functionality working, but I now face another problem: I need the gallery's parent block (#content) to expand when the full-sized image slides out to accommodate its width. Setting its CSS width to "auto" failed, so I tried a few different ways of doing it in Jquery. So far, no dice.</p>

<p>Here's the code I'm working with. Any suggestions would be appreciated.</p>

<pre><code>        $(document).ready(function() {
        $('#back').hide();
        $('#full-wrap').hide();
        $('#thumb-wrap a').children().not('img').hide();//hide image captions

        $('#thumb-wrap a').click(function(){

            var $big = $(this).index(); //get 0-based index of the thumb that was just clicked

            $('#thumb-wrap').hide(); //hide the thumbnails
            $(this).children().not('img').clone().appendTo($('#gallery-wrap')).wrapAll('&lt;article/&gt;').show(); //Clone the image captions and wrap them in an article
            $('#back').fadeIn(500); //make the back button appear

            $('#full-wrap img').eq($big).siblings().hide(); //Hide all fullsized images that don't match the index of the clicked thumb
            $('#full-wrap img').eq($big).show().css({background: '#603'}); //reveal fullsized image that does match the index of the clicked thumbnail

            var moveIt = parseInt($("#thumb-wrap").outerWidth()); //Get the width of the right div
            $("#content").width($("#content").width() + moveIt);//Extend #content by an area equal to the size of the thumb-wrap
            $('#full-wrap').show().animate({ right: '+=' + moveIt + 'px'}, 'slow'); //slide out by a distance equal to the width of thumb-wrap.

        });

        $('#back').click(function(){
            $('article').remove();//remove the article div
            $('#thumb-wrap').fadeIn(500);//reveal the thumbnails
            $('#full-wrap').delay(300).animate({right: '0', opacity: 'toggle'}, 400);//hide the fullsize image div
            $(this).fadeOut(600);//hide the back button
        });

     });
</code></pre>
