javascript - CSS column-count elements jumping across columns -

i'm trying dynamic amount of elements show across 5 elements using css3 column-count, when expand list item heights on hover, causes jumping (an element going next column).

you can see behavior here

i'm assuming it's because column-count uses height calculate item goes or something...how can have work intended?

if try increase height of <ol>, become 4 columns or 3 columns because elements fill first column, start 2nd column, , on.

in short, css3 columns not right solution trying do. (if understand correctly, want hovered element overflow parent container going outside box. however, css3 columns designed such overflow continue @ top of next column, , there's no way i'm aware of change behavior).

i recommend using different approach achieve ui you're after, such using jquery insert wrappers around each column.

however, if you're set on using column-count, may able hack doing this:

jsfiddle:

http://jsfiddle.net/p6r9p/

css:

ol li:nth-child(5n) {   padding-bottom: 40px; } 

jquery:

function togglepadding(li, status) {     var index = li.index();     var target = (index % 5 === 4) ? li : li.siblings().eq(index + 3 - (index % 5));     target.stop(true).animate({         "padding-bottom": (status === "on") ? "40px" : 0     }); }  $('a.song').each(function () {     var origwidth = $(this).width();     var origheight = $(this).height();     $(this).hover(function () {         togglepadding($(this).parent(), "off");         $(this).stop(true).animate({             width: origwidth * 2,             height: origheight * 2         })     }, function () {         $(this).stop(true).animate({             width: origwidth,             height: origheight         });         togglepadding($(this).parent(), "on");     });     $(this).clone(true).attr({         "class": "song-detail"     }).css({         "z-index": 1,         "background-color": "#ccc"     }).appendto('ol').wrap("<li></li>"); }); 

this rough demo , need cleaned production. strategy add 40px padding "buffer" after every 5th element (the end of column). when element hovered, find sibling @ end of column , animate padding 0.

but can see if run mouse on several elements in succession, boxes shudder 1 box temporarily jumps next column. css3 column-count wants balance columns.

so recommend using different approach, feel free play , see if can working.

**edit: 1 way without column-count**

since you're using jquery, have wrap every x elements in <div class="col">, , use divs columns.

jsfiddle: http://jsfiddle.net/qhtvh/

jquery:

var container; var = 0; var numcols = 5; var colcount = math.ceil($('.songs a').length / numcols);  $('.songs a').each(function () {     if (i % colcount === 0) {         container = $('<div class="col"></div>').appendto(".songs");     }     $(this).appendto(container);     i++; }); 

css:

.songs .col {     max-width: 18%;     overflow: hidden;     display: inline-block;     vertical-align: top;     margin: 0 5px; } .songs {     display: block;     margin: 10px 10px;     background-color: #eee;     width: 200px;     height: 40px;     cursor: pointer;     text-overflow:ellipsis;     overflow: hidden;     white-space: nowrap; } 

html:

<section class="songs">   <a class="song" data-src="songs/titanic.mp3" style="width: 187px;">titanic</a>   <a class="song" data-src="songs/titanic.mp3" style="width: 187px;">titanic2</a>   etc... </section>