• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

Horizontal scrolling div box

Question

asy1mpo    0

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??

Share this post


Link to post
Share on other sites

5 answers to this question

Recommended Posts

  • 0
+primortal    14,064

You can try something like

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

Share this post


Link to post
Share on other sites
  • 0
asy1mpo    0

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

thanks

Share this post


Link to post
Share on other sites
  • 0
rson451    0

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.

Share this post


Link to post
Share on other sites
  • 0
raskren    0
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.

Share this post


Link to post
Share on other sites
  • 0
buggis    0

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.