Question

I have a variable amount of elements in a fixed sized div. As long as there <= 5 elements they have enough space to sit side by side. But as soon as there are more, I want them to slightly overlap each other more and more, so they all stay inside the div. Think of it as holding a variable amount of cards in a game. I can’t think of any way to do this, aside from controlling it “manually” with JavaScript on adding/removing elements. Is there a way to let the browser handle this effect for me?

Answer 1

http://jsfiddle.net/mFP9E/

$(document).ready(function(){
  $("ul").each(function(){
    var total = $(this).find("li").length;
    var elWidth = 100; //Element width
    if(total > 5) {
      var space = Math.ceil((((elWidth * total)-(elWidth * 5))/total)/2);
      $(this).children("li").css("margin","0 -"+space+"px");                      
    }                     
  });
});​