how to: dynamic div width according to gallery content - css

Question

http://portfolio.curiouslucious.com/?page_id=8
I'm trying to create a horizontal scrolling gallery (with a edited wordpress theme)
Currently, I have the nextGen Gallery plugin which manages all my images.
Right now, the only way I can get the images to display next to each other and scroll horizontally is to set the gallery width to something massive - 10000px
/* ----------- Gallery style -------------*/
.ngg-galleryoverview {
overflow: hidden;
margin-top: 10px;
width:10000px;
overflow: hidden;
clear:both;
display:inline-block !important;
}
/* ----------- Gallery style -------------*/
is there a way I can make the width change dynamically dependent on the number of images?
here is 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 prefer to avoid javascript if possible as I know I'm going to have huge issues implementing it. But any help would be appreciated.
Thank you!!

Answer 1

If you don't need to support IE7, then you can apply...
.theContent {
display: table;
}
.ngg-galleryoverview {
display: table-row;
float: none;
}
ngg-gallery-thumbnail-box {
display: table-cell;
float: none;
}
Then it will show up as you want to. There will still be some issues, but I'm sure you can take it from there.

Answer 2

I don't think what you're trying to do is possible with pure CSS. I whipped up a custom jQuery plugin that should work with your code.
Demo: http://jsfiddle.net/wdm954/KHT32/4/
I made this so it sets the dimensions dynamically based on the image with the greatest height and the sum of the width of all the images plus the margin-right (so you can add some space between them).
jQuery 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: Remove the "scrollGal" div from your HTML. Replace the JS with the following (the new code will wrap the appropriate div with 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;
});
$sg.width(ww);
$sg.height(h);
$sg.children('div').width(w);
});
};
})( jQuery );
$('#ngg-gallery-1-8').scrollGal();