CSS column-count elements jumping across columns

Question

I\'m trying to get a dynamic amount of elements to show across 5 elements using CSS3 column-count, but when I expand the list item heights on hover, it occasion

Answer 1

Have you tried to use the a tag as container? And animate a inner div (or other)

Js Fiddle here: http://jsfiddle.net/keypaul/Yk2du/41/

html

    

        
            
Titanic
        
    
    

        
            
Titanic
        
    
    

        
            
Titanic
        
    
    

        
            
Titanic
        
    
    

        
            
Titanic
        
    

js

$('a.song').each(function() {
    var origwidth = $(this).width();
    var origheight = $(this).height();
    $(this).hover(
        function() {
            $(this).find('div').stop().animate({width: origwidth * 2, height: origheight * 2});
        }, function() {
            $(this).find('div').stop().animate({width: origwidth, height: origheight});
        });
    $(this).clone(true).attr({"class":"song-detail"}).css({"z-index": 1, "background-color":"#CCC"}).appendTo('ol').wrap("
");
});

css

ol {
  padding: 0px;
  list-style: decimal-leading-zero inside;
  color: #000;
  font-size: 0.9em;
  -moz-column-count: 5;
  -webkit-column-count: 5;
  column-count: 5;
}

ol li {
  display: inline-block;
  margin: 5px 10px;
}

ol li a {
  background-color: #EEE;
  display: block;
  width: 200px;
  height: 40px;
  cursor: pointer;
  text-overflow:ellipsis;
  white-space: nowrap;
  margin: 0;
    position:relative;
}

ol li a div {
    position:absolute;
    top:0;left:0;
    width:187px;
    height:40px;
    background:red;
}