jquery - move div to index position -

i have 3 divs on page.

you can see sample here-

fiddle

on page fading divs on click. goes fine according assumed.

now if click on div tab, siblings fading out , fading-in again on show button click.

when div goes hide, comes left position default. want div click should go @ middle of page. tried giving index position of second-child not working.

how can index position of second child moving box @ middle?

jquery-

$(function () {         var index = $('.span4:nth-child(2)').index();         $('.container .row-fluid .span4 ').click(function () {             $(this).show().siblings().fadeout();             $(this).css('margin', index);         });         $('.show-all').click(function () {             $('.span4').fadein();         });     }); 

maybe should use .position() instead of .index()

$(function () {     var index = $('.span4:nth-child(2)').position().left;     var left = $('.span4:nth-child(2)').position().left;     var top = $('.span4:nth-child(2)').position().top;     $('.container .row-fluid .span4 ').click(function () {         $(this).show().siblings().fadeout();          $(this).css('margin-left', left);     });     $('.show-all').click(function () {          $('.span4').css('margin', "auto");         $('.span4').fadein();     }); }); 

http://jsfiddle.net/yrsal/9/