Question

That above is basically my problem. I already browsed some other questions on SO, but the one closest was about 1 element, that doesn’t have to be in the center.

I basically have three images next to each other in an invisible wrapper div, found here: http://korilu.nl/maurits/search.html

What I want is to prevent the two images that are small from going up and down when one is clicked.
I tried to put position:relative; on the wrapper and position:absolute; bottom:0; on the images as suggested in question mentioned above, but then they are not in the middle anymore, but over eachother in the upperleft corner. How do I do this?

EDIT: Or top or center, I dont care, as long as they stop moving

Answer 1

You just need to alter your jQuery script:

$("a").click(function(){
                $(current).animate({
                    opacity: .5,
                    height: '100px', 'margin-top': '100px'
                });
                $("img", this).animate({height: '200px','margin-top': '0px', opacity: 1});
                current = "#" + $(this).find("img").attr("id");
            });

Note the two new occurences of margin-top. Tried it on your site and works as you want it.