Question

I have two wrapper divs side by side. I want to line up divs in the right column to match the position of select divs in the left column.

In the fiddle, each div in the right column should be lined up with the top of every second div in the left column. There should be one div [x] per two divs on the left.

It’s all dynamically created which is why I’ve made the fiddle the way it is http://jsfiddle.net/sKZXJ/

HTML:

<!-- Extra height added because that seems part of the problem -->
<div style="height:60px;"></div>

<div id="scroller">
    <div id="wrapper1"></div>
    <div id="wrapper2"></div>
</div>

CSS:

#scroller {
    height:300px;
    width:60px;
    overflow-x:scroll;
}
#wrapper1 {float:left; width:15px;}
#wrapper2 {float:left; width:15px;}
.littleOne {
    margin-top:1px;
    position:relative;
    height:40px;
    background-color:#006600;
}
.littleTwo {
    margin-top:1px;
    position:relative;
    background-color:#00CCCC;
}

THE FUN PART:

$(document).ready(function() {

    // Fill wrapper1 with divs
    for(var i=0;i<50;i++) {
        $('#wrapper1').append('<div id="a'+i+'" class="littleOne"></div>');
    }

    // Add selected divs to wrapper2 in matching positions
    var pos = 0;
    for(var i=0;i<50;i+=2) {
        $('#wrapper2').append('<div id="b'+i+'" class="littleTwo">X</div>');
        pos = $('#a'+i).position().top - $('#scroller').position().top;
        $('#b'+i).css('top', pos+'px');
    }

});

Answer 1

Here you go: http://jsfiddle.net/f5ArU/3/

$(document).ready(function() {

    // Fill wrapper1 with divs
    for(var i=0;i<50;i++) {
        $('#wrapper1').append('<div id="a'+i+'" class="littleOne"></div>');
    }

    // Add selected divs to wrapper2 in matching positions
    var pos = 0;
    var offset = 0;
    for(var i=0;i<50;i+=2) {
        var b = $('<div id="b'+i+'" class="littleTwo">X</div>');
        $('#wrapper2').append(b);
        pos = $('#a'+i).position().top - offset;
        offset += b.height() + 1;
        b.css('top', pos+'px');
    }

});