Question

I wonder whether someone may be able to help me please.

I’m using Aurigma Image Uploader and FancyBox to produce this gallery page. The problem I’m having is that the images are positioned to go vertically down the page, whereas I would prefer them to go horizontally across the page, creating separate rows of images, one underneath the other.

I appreciate that some may not know anything about the Aurigma package, but I think I’m right in saying that ‘Fancybox’ is a little more widely used.

I just wondered whether someone could perhaps provide somne guidance please on the settings I would need to change within the Fancybox script so that the images are positioned horizontally rather than vertically.

Many thanks

.ccs file extract

.gallery-image-list { padding: 0; list-style-type: none; }
.gallery-image-list .item { display: inline-block; vertical-align: top; margin: 5px; padding: 15px; white-space: nowrap; width: 150px; float:left; }
.gallery-image-list .wide-item { width: 250px; }
.gallery-image-list .item .preview { display: inline-block; vertical-align: top; }
.gallery-image-list .item .data { margin: 5px; padding: 5px; list-style-type: none; display: inline-block; vertical-align: top; font-size: 95%; }
.gallery-image-list .item .data li { margin-bottom: 5px; }

Answer 1

I think what you want is to add float:left; to your item class in css.