Question

OK, first off, I am new at this so be gentle (please). I am trying to layout multiple columns of divs. Each div contains multiple images stacked vertically. The images are all the same size. Here is what I’ve come up with using jQuery:

var $columns= $('<div />', {
    css: {
        align: 'center', position: 'absolute',
        height: 125, width: '100%', left: 0, top: 355, zIndex: 10
    },
    id: 'columns',
    text: 'Towers'
}).appendTo('#mainDiv');

for (var c = 0; c < 6; ++c) {
    var $c = $('<div />', {
        css: {
            marginLeft: 5, marginRight: 5,
            textAlign: 'center',
            top: 20, width: 20, zIndex: 20
        },
        id: 'c' + c
    });

    for (var i = 0; i < 8; ++i) {
        $c.append($('<img />', {
            css: {
                marginBottom: 0, zIndex: 30
            },
            id: 'c' + c + 'i' + i,
            src: 'image' + c + '.png'
        }));
    }

    $columns.append($c);
}

Each image is 17x11px. When I run this I get 6 columns with 8 images vertically stacked. But, the columns are all in a single column. I want them side-by-side. Is this just the totally wrong way to do it or am I at least close.

Extra credit: How do I make the images overlap each other by say 4px top to bottom?

Answer 1

A <div> is a block element so it has display:block by default; this means that it is as wide as its parent unless you assign it a specific width. I think what you want to do is use inline-block with $c:

var $c = $('<div />', {
    css: {
        display: 'inline-block',
        marginLeft: 5, marginRight: 5,
        textAlign: 'center',
        zIndex: 20
    },
    id: 'c' + c
});

Setting top won’t do anything for you as you haven’t specified a position. If the images are 17×11 then you should say so:

$c.append($('<img />', {
    css: {
        marginBottom: 0, zIndex: 30
    },
    id: 'c' + c + 'i' + i,
    src: 'image' + c + '.png',
    width: 17,
    height: 11
}));

And if you want a bit of overlap, then set a negative top margin to push them up a bit and set display: block on the images.

http://jsfiddle.net/ambiguous/949ey/