Making a div expand with jQuery without moving divs floating to it

Question

I\'m trying to get an effect similar to what you can find at http://www.nokiausa.com/us-en/products/ with a grid of basic information, where a click expands information over

Answer 1

Is this what you were meaning?

Please excuse the horrendous formatting, I wrote it quickly

http://jsfiddle.net/y3QBw/5/

var li_original_height = $('#stuff1').css('z-index');

function growRight() {
    var $stuff = $('#stuff1'),
        li_left = $stuff.offset().left,
        li_top = $stuff.offset().top,
        li_stuff_width = $stuff.outerWidth(true) + 5,
        $sibling = $stuff.next();

    $sibling.css('margin-left', li_stuff_width);
    $stuff
        .css({
            'z-index': 1000,
            background: '#588EC8',
            position: 'fixed',
            top: li_top,
            left: li_left,
            margin: 0
        })
        .animate({
            width: "510px"
        }, 750, function() {});
}

function hideRight() {
    var $stuff = $('#stuff1'),
        $sibling = $stuff.next();

        $stuff.animate({
            width: "250px"
        }, 750, function() {
            $stuff.css({
                'z-index': li_original_height,
                background: '#B8B8B8',
                position: 'relative',
                top: 'auto',
                left: 'auto',
                margin: 5
           });
            $sibling.css('margin-left', 5);
        });

}

$('#stuff1 a').toggle(
    function () {
        growRight(); 
        return false;
    },
    function () {
        hideRight(); 
        return false;
    }
);