Question

This is my first attempt at responsive design, so I’m keeping it simple.

I have a <ul> which is centrally aligned, with rows of 3 images. However, if the last row has only 1 or 2 images, the entire row is centrally aligned, and I wish to align the images to the left (so they are vertically aligned with the ones on top).

This would be easilly accomplished with float:left. However, I want the number of images on each row to adapt to the window size, while keeping the <ul> centered on screen.

Here’s a jsFiddle with only one item on the bottom row, which is centered. If you resize the window so it becomes smaller, the number or items on each row will adapt and the list will remain centered on screen, but the last row will still be centered. Is there any way I can align the last row to the left?

EDIT: Here’s some pictures, as requested. This is what I’m looking for:
the <ul> is centered on screen, but the bottom row is aligned to the left.

However, if we resize the window, the list will adapt, but the <ul> is still centered on screen, and the bottom row is still aligned to the left.

How can I accomplish this?

Answer 1

Normally I would suggest giving the ul a fixed width and margin: 0 auto; to center, however if you want it to expand with the page, then just give it some fixed left and right margins.

http://jsfiddle.net/gQBpU/13/

ul {
    max-width:800px;
    margin: 0 50px;
}

ul li {
    float: left;
}

ul li img {
    margin:5px;
}

​