It looks to me like the value you need to put there depends on the sum of the widths of all the images; so you can't just pick a value that works for all pages.
On the other hand, it also seems like a bad solution to the problem of keeping the images next to each other. Why set the width of the container? If you just ensure white-space doesn't wrap then all the images should sit next to each other without worrying about the container's width.
#container
{
white-space: nowrap; /* keep images on the same line */
font-size: 0; /* removes whitespace between images */
}
From the javascript, we now only need the imageresize()
(provided we use it to set different quality source images), and trigger it on ready
and resize
; no magic numbers required.
(For backwards compatibility with browsers that don't or poorly support white-space
, you could use <nobr></nobr>
)