How do you layout columns of DIVs? (or, what am I doing wrong)

OK, first off, I am new at this so be gentle (please). I am trying to layout multiple columns of divs. Each开发者_Python百科 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?

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 17x11 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/

Weird solution you got there, I'm torn between liking and hating it. Still, without giving your inner divs a position property, they'll default to static and top/left won't do anything.

Also, the idea behind CSS positioning is to have an outer element with position relative and inner elements with position absolute. Those inner elements will have absolute positioning relative to the parent div with position:relative.

var $columns= $('<div />', {
    css: {
        align: 'center', position: 'relative',
        height: 125, width: '100%', left: 0, top: 0, 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',
            position: 'absolute', top: 20, left:15*c, 
            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);
}

If you want images to overlap, you can use absolute positioning again on images. Consider you already loop through them:

css: {
    marginBottom: 0, zIndex: 30,
    position: 'absolute',
    left:0, top:15 * i
}

Here's an example on jsfiddle.