I am trying to produce a horizontal scrolling gallery (having a edited wordpress theme) Presently, I've the nextGen Gallery wordpress plugin which handles my images.

At this time, the only method I'm able to obtain the images to show alongside one another and scroll flat would be to set the gallery width to something massive - 10000px

/* ----------- Gallery style -------------*/

.ngg-galleryoverview {
overflow: hidden;
margin-top: 10px;
overflow: hidden;
display:inline-block !important;

/* ----------- Gallery style -------------*/

it is possible to way I'm able to result in the width change dynamically determined by the amount of images?

this is actually the stylesheet.css code

/* Blocks       */
#container { width:1000px; margin:25px 60px; }
#left-box { float:left; width:270px; margin-right:65px; }
#sidebar { float:right; text-align:right; }
#sidebar ul { text-align:right; list-style:none; }
#sidebar h3 { font-size:1em; }
#sidebar small { font-size:0.7em; font-family:Arial, Helvetica, sans-serif; }
#author_note { font-size:0.85em; width:220px; padding:5px; border:1px solid #CDCDCD; float:right; text-align:right; }
#notes { width:600px; float:left; margin-top:20px; overflow-x:auto; overflow-y:hidden;     height:500px; display:inline-block;}
#notes h1 { font-size:1.6em; font-weight:normal; margin:0; padding:0; }
#logo { float:right; margin-top:30px; }
#navigation { clear:right;float:right; width:270px; text-align:right; }
.copyright { margin-top:40px; color:#999999; } 
.copyright a { color:#666666; text-decoration:underline; }
.copyright .theme { font-size:0.7em; font-family:Arial, Helvetica, sans-serif; }    
.copyright .theme a { color:#999; text-decoration:none; }
.pages { margin-top:80px; font-size:1.1em; font-weight:200; }
.pages li { margin-top:5px; font-size:0.9em; }
.categories { margin-top:45px; font-size:0.85em; }
.links { margin-top:45px; font-size:0.85em; }
.navigation { margin-bottom:50px; font-size:0.85em; }

I'd would rather avoid javascript if at all possible when i know I am likely to have huge issues applying it. But any help could be appreciated. Thanks!!

If you don't have to support IE7, you'll be able to apply...

.theContent {
  display: table;

.ngg-galleryoverview {
  display: table-row;
  float: none;

ngg-gallery-thumbnail-box {
  display: table-cell;
  float: none;

It can have up as you would like to. There it's still some issues, but I am sure you are able to take over from there.

I do not think what you are attempting to do can be done with pure CSS. I made a custom jQuery wordpress plugin that will work together with your code.


I chose to make this therefore it sets the size dynamically in line with the image using the finest height and the sum width of all of the images as well as the margin-right (so that you can then add space together).

jQuery wordpress plugin code...

EDIT :: Fixes!

#scrollGal {
    overflow-x: scroll;
    overflow-y: hidden;
    border: 1px solid black;
    padding: 15px;

#scrollGal img {
    float: left;
    margin: 0px;
    padding: 0px;

#scrollGal div {
    margin: 0px;
    padding: 0px;

#notes {
    overflow-x: visible;
    overflow-y: visible;

EDIT: Take away the "scrollGal" div out of your HTML. Replace the JS using the following (the brand new code will wrap the right div using the scrollGal div)...

(function( $ ){
    $.fn.scrollGal = function() {
        return this.each(function() {

            $(this).wrap('<div id="scrollGal" />');
            $sg = $(this).parent();

            var obj = $(this).find('img');
            var arr = $.makeArray(obj);
            var w = 0, ww = 0, h = 0;
            $.each(arr, function(i, val) {
                w += $(this).width();
                w += (parseInt($(this).css('marginRight')));
                // find greatest width
                var nw = $(this).width();
                if (nw > ww) ww = nw;
                // find greatest height
                var nh = $(this).height();
                if (nh > h) h = nh;

})( jQuery );