Hi guys,

I got a question if it is possible to force several images in a horizontal row without linebreak.

I got a div in which there is a table named #scroll in this div I want to load several images with different sizes that should all be ordered next to each other in a horizontal row. The problem is, that the div is only 650px wide. If the space is exceeded, I want the div to display a horizontal scrollbar to explore the images that did not fit in on the right.

With the following CSS I achieved the images to display next to each other:

HTML

My problem is now, that the last two images get line-breaked into the next line, below the other images instead of staying to the right of them because the space is limited to 650px.

Can anyone please help me find out where the problem lies? I was searching around the web to find a solution, but there was none with pure css. I know that one can achieve this with a table with X columns and loading each image in a single column. My problem is, that the amount of images varies on each page, so I cant predict the amount of colums I have to prepare, if there are too little I can’t put in further images if there are too many, I scroll spare space.

The whole thing is intended to work in a CMS and the user shouldn’t be forced to learn HTML or CSS in order to display the images on his site.

Hope someone can help.

Thanks in advance

smik

Hi,

after playing a bit around with CSS I found a possible solution:

CSS

HTML

This works as long as there is no space between

.

Now I’m facing a new problem: As soon as I assign a link to any of the images the whole system doesn’t work no more, the last image gets line-breaked and the image with the link gets placed to the top of the scrollbox (before it was assigned to the middle with vertical-align: middle;) Why is this the case and how can this be solved?

Thanks

smik

Hi,
I’ve posted the solution to your problem as the first tutorial on my website.

http://www.vishwebdesign.com/xhtml-css-tutorials/

I hope that helps..Best of luck

Hi Vishal,
.
first of all, I’m happy that finally someone has answered my question. I already was wondering if there is no solution to my question > Now it’s become a real tut on your site ;-))
.
I saw your tut and I have to say it’s a good one. But I have also to admitt, that it’s only partly solved, regarding that I want to use it in a CMS as I said before, where I can’t have the user playing around in the HTML-view. I don’t even know if they could assign new images into that unordered list without any html-knowledge, because the pix have to become a <li> item. My CMS uses a wysiwyg-editor, so the user can easily insert images on his site and link them to any direction, but do they become automatically a <li> after insertion??? I have to try it out.
.

Explanation :
I’m using a fixed-width div container to store contents of a list that’s more than its width. If you do not specify the width of your unordered list, the horizontal scroll-bar won’t be working, simply because your list will inherit width of its container div.

Thats exactly the point, where it won’t work in a cms, because the user has to adopt the width of the fixed-width div container.

Dark areas:
You’ll need to modify the width of your list everytime you remove or add too many of its content images. Because if you remove some images, you’ll get too much of scrolling in blank space. And if you add images, only contents upto taking upto 1500px total width will be displayed, the excess contents will be hidden by the “overflow-y:hidden” we used earlier.

That would also be kind of complicated, because even if you take out some pix, you have to assign a new width to that container div, in order not to scroll too much blank space :-(
As the CSS is placed in an external file the user has no chance to alter anything in that CSS-file which is intended, because sooner or later he’d mess up all the code, for sure ;-))

For dynamically resizing your list of images, you should be using javascript, unfortunately, I’m not good at that. Any tips are welcome though:-)

Is there no way to solve this without javascript??? I’m almost sure there could maybe be a way using tables again, because they get streched automatically if the content exeeds the assigned table-width and it shrinks again if you’d take out some pix.

Also when we use the css overflow attribute, our css won’t be validated by w3c :-(

>>> I don’t care about that as soon as it works in the most common browsers it’s fine with me.
.
BUT:
Look at your tut-site using IE6 and FF2, the scroll-box is placed differently one time it’s placed left, the other time it’s centered.
.

If you’d find a way to solve the width-problem without javascript and external CSS-file, that would be perfect.
.
For coders your tut is great anyways, they know how to use it and therefor would’t mess up things as an ignorant CMS user would.
.
Hope to hear from you again.
.
Best regards
.
smik

Hi Smik,
I’ve tried using tables too, unfortunately that won’t work. The table doesn’t expand more than 100% horizontally to accommodate for contents, only vertically..I believe if you wished to have a vertical scroll box as container for your images, it would work fine and stretch to contain the images, but that’s not the answer to your question :-)

This is all i can think of with css today, i don’t think the horizontal scroll can work without javascript. I’ve worked on some open-source slideshows that used js to make place for excessive contents..

I use unordered lists because they can contain anything than images only. You’ll just need to modify the loop you use to display the images in a list.

Thanks for the tip, i almost forgot to solve that bug on IE, now it’s done..

I’ll update the tutorial in case i find a way out of that width problem..

Best regards,