Array Of Images That Have To Be Placed In One Horizontal Line (with Scrolling)

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 th

Solution 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).