Horizontal scrolling div box

[asy1mpo]

I want to have a 'box' on my web page which scrolls horizontally.

The contents of the box will have images. There could be one image (then there will be no scrolling) or there could be 8 images (and there will need to be a horizontal scroll bar).

I have managed to do something like it having a div within a div

The outer div is just one which is about 700px - width of the web page

I set the inner div to a width of about 1790px - that works find if its got the 8 images. However, if its got just one image it still has the horizontal scroll bar.

Any ideas??

[+primortal Subscriber²]

You can try something like

<div style="overflow:auto; width:700px;">
	<div style="width:1790px;">
		{images here}
	</div>
</div>

[asy1mpo]

that shows the horizontal bar all the time. i only want it shown if needed

thanks

[rson451]

i havent tried this but couldnt you do just one div and do on that div style="overflow: scroll" then set a height which doesnt need a scroll and let the width adjust accordingly.

[raskren]

that shows the horizontal bar all the time. i only want it shown if needed

thanks

I hope you're good with JavaScript because that's the only way you're going to achieve this effect.

[buggis]

the solution requires javascript, because the white-space:nowrap; CSS rendering is not going to work on inline block elements. They will always wrap unless the containing DIV is set to a width value large enough to let all inline block elements float left.

so: in CSS you set the images (your inline block elements) to {float:left;} and give them a static width like {width:78px;}

in JAVASCRIPT you calculate the number of elements you have in the scoller (8 in this case).

then you multiply that by the width of your elements.

var els = 8;

var elwidth = 78;

var scrollwidth = els*elwidth+"px";

document.all.getElementById("scroller").width = scrollwidth;

I haven't tested this because I use jquery most of the time, but in principle it's the only way to make this work.