Array of images that have to be placed in one horizontal line (with scrolling)

Question

Hi,

I just designed a portfolio website. I have a whole array of images that I want to keep in one line (with horizontal scroll). This only happens when I have set a fixed width for the surrounding div (in this case with class '.post-images'), wide enough to contain all images. This could be just fine if the amount of images and their widths wasn't dynamic. Unfortunately this isn't the case here. I want this div to be wrapping around all images and not causing them to float. I have tried to set the div's where I put each image in ('.post-image') to 'white-space: nowrap' to no avail.

See an example here: Link

How can I fix this problem? I hope someone is willing to give me a hand here ;)

Thanks,

Jeroen

Answer 1

Replace the css for .post_images and .post_image with:

.post_images { white-space:nowrap; }
.post_image { display:inline; }

Effectively, this makes the wrapping <div class="post_image"> elements redundant (that's the display:inline); you may as well remove them.

In general, most elements size their width according to that of their container; if you wish an element to size according to content, you'll need a <table>, display: table or single line.

Edit: both white-space:nowrap and display:inline have been supported on all major browsers for years (in IE, all the way back to IE 5.5).