There are many great features available to you once you register at Neowin, including:

  • Richer content, access to many features that are disabled for guests like commenting on the front page
  • Access to a great community, with a massive database of experience on hard & software issues, gaming and recreational activities, and more
  • Access to the Neowin IRC - you could make a friend from across the world and talk to them live
  • Access to Neowin contests & subscription offers and forums that are not open to guests/li>
  • It's simple, and FREE! · Register here
  • 0

Horizontal scrolling div box


 Share

Question

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

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

You can try something like

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

Link to comment
Share on other sites

  • 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.

Link to comment
Share on other sites

  • 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.

Link to comment
Share on other sites

  • 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.

Link to comment
Share on other sites

This topic is now closed to further replies.
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.