CSS Gallery


On my home page I would like to create a gallery of about 18 images and titles which represent categories that will link to a specific range of products. The gallery would would be a bout 3 images across and 6 down.

Can anybody offer any advice on the best way to achieve this with CSS.

Regards Ian

My advice would be either to float the images (or the containing <div> if you want to include text with them), or just leave them as display:inline. That way, the length of the row will adapt to the size of the window, and you won’t end up with either horizontal scrolling or lots of wasted screen space.


You could use display:inline-block if you have pairs of images and captions/titles and do something like this:


Just view source as the code is in the head.