Using vertical scroll

[I-llumination]

I am trying to make a div that only scrolls vertically. It must contain several thumbnails.

Once my div reaches his maximum width, it continues on a new line. How can I prevent it from doing this? I can reach the effect I want by enclosing the pictures in a pre-container, but I dont think this is the right solution. Actually, it's really dirty. The must be a solution to do this with CSS... right?

Hopefully somebody can help me out!

Thnx in advanced...

Haie!

[allahverdi]

I think u can make invisible horizontal scroll

[boogyman]

it cannot be done with css alone, you would need to use some javascript to insert a break tag between the images, however it would probably be a better solution to make all of your thumbnails the same size and either create a template or just put in the break tags manually

[Medyman]

I am trying to make a div that only scrolls vertically. It must contain several thumbnails.

Once my div reaches his maximum width, it continues on a new line. How can I prevent it from doing this? I can reach the effect I want by enclosing the pictures in a pre-container, but I dont think this is the right solution. Actually, it's really dirty. The must be a solution to do this with CSS... right?

Hopefully somebody can help me out!

Thnx in advanced...

Haie!

Do you want a vertical scroll or horizontal? The problem you describe shouldn't matter for a horizontal scroll.

If you're looking for how to do the scroll, jQuery's scrollTo plus is amazing.

[I-llumination]

Thanks for the reactions.

I think I haven't been really clear, my mistake. I meant the (in CSS terms) overflow-x. So I only want the <-----> scrollbar to be visible and the content should stay on one line. So the last thing I want is adding break-tags, cause that is exactly the behaviour I dont want. But thanks for the suggestion boogyman.

[sreenivasulareddy]

plz send me the code

[Medyman]

Thanks for the reactions.

I think I haven't been really clear, my mistake. I meant the (in CSS terms) overflow-x. So I only want the <-----> scrollbar to be visible and the content should stay on one line. So the last thing I want is adding break-tags, cause that is exactly the behaviour I dont want. But thanks for the suggestion boogyman.

That's what I suspected. What threw me (and boogyman, I assume) off was that you have vertical written in the subject.

Maybe you want to post some code or a link to your site where this is happening. I'm having trouble imagining what you're looking for.

If you add overflow-x:auto to a div's CSS, the horizontal scroll bar should appear, given that it's contents are larger than the containing div. That means you need to explicitly state the width on both the container div and the contained div.

Example:


<div id="overflow">
<div id="inner">
Your Content
</div>
</div>

CSS:

#overflow { overflow-x:auto; width:500px; }
#inner { width:800px; }

[I-llumination]

I've put the website online on this address:

http://temp.purplepineapple.nl/ (http://temp.purplepineapple.nl)

If you go to "Gallery" you will see the images. I now did it the dirty way. Please use a browser (means != IE) for the best result. This is how I want to have it.

The site isnt fully debugged, so if you see something that is'nt correct, please let me know.

@Medyman: Your solution is a good one, the only problem is that the width of my innerdiv will be dynamic, depending on the number of images.

[Medyman]

Hmm....I see.

Question:
If you're using javascript and AJAX so heavily anyway, why not move to a javascript solution?

Some links that might be of interest:
http://sorgalla.com/jcarousel/
http://www.freewebs.com/flesler/jQuery.ScrollTo/


Also, you don't have a valid doctype. You should fix that. That *might* fix some of your IE woes.