CSS removing white space in a specific situation

Question

Take a look at this.

http://jsfiddle.net/DTxQf/18/

When you click on the body of the lower right box, "TOO" is appended to the ul and animated upwards. This results in white space being added to #window-frame. I do not want this. I want no gap between "TOO" and "NEXT ITEM". Can this be done using CSS? I'd rather not fool with heights using JS. Also, any insight as to why this is happening?

Thanks

Answer 1

Try using margin-top instead of animating the top property:

$('#latest-image-list').animate({marginTop: "-=20"}, "fast");

Here is a demo: http://jsfiddle.net/DTxQf/27/

Also, on a side-note, you created the height variable without the var statement which put it in the global scope (otherwise it would have been inside the window.load event handler scope). Always use var to make sure you aren't creating global variables unnecessarily (which creates extra overhead each time the variable is looked-up).

Answer 2

If the list must be relatively positioned, animate marginTop instead of top.

JSFiddle