How can i scroll images horizontally in a <div> layer?

Hello, what i need to do is have a horizontally scrolling layer in my html that includes several images side by side with no vertical scrollbar.  the width of the horizontal scroll should probably be about 500 pixels and height about 120 pixels. basically, the same thing that youtube does vertically, i want to do horizontally.  the code below is an example of what i'm using but the images don't get placed side by side!  they are being placed one beneath the other, which is not what i want.

anyone have code that can achieve what i'm needing here?
thanks again!
<div style="border: 3px double #D2C8CA; overflow-x:scroll; overflow-y:hidden; width:150px; height:120px">
 
<a style="dislplay:inline" href="watch?v=19" title="test"><img src='http://www.mysite.com/test.jpg' border="0" style="dislplay:inline; border: 3px double #D2C8CA; padding-left: 0; padding-right: 0; padding-top: -10px; padding-bottom: -10px"></a>
 
 
<a style="dislplay:inline" href="watch?v=19" title="test"><img src='http://www.mysite.com/test.jpg' border="0" style="dislplay:inline; border: 3px double #D2C8CA; padding-left: 0; padding-right: 0; padding-top: -10px; padding-bottom: -10px"></a>
 
</div>

Open in new window

linuxroxAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

eejonesCommented:
I noticed a typo in the word 'dislplay' in your code.

Using a table to hold the images works, if you are not opposed to using tables.

One thing to note: if you want the div to be tall enough to hold the images, you have to calculate in the height of the horizontal scrollbar which is about 25 pixels high (you can detect this exactly with JavaScript), and the width of any borders around the image (borders are added to the outside of the image).


<div style="border:solid 1px red; overflow-x:auto; overflow-y:hidden; width:500px; height:125px">
  <table border=1>
    <td><img src="1.gif" height=100 width=100 border=1 /></td>
      <td><img src="1.gif" height=100 width=100 border=1 /></td>
      <td><img src="1.gif" height=100 width=100 border=1 /></td>
      <td><img src="1.gif" height=100 width=100 border=1 /></td>
      <td><img src="1.gif" height=100 width=100 border=1 /></td>
      <td><img src="1.gif" height=100 width=100 border=1 /></td>
  </table>
</div>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Tony van SchaikFront-end Web developerCommented:
I think you will have to do this with iframes, i tried to fix it but with only divs it's not working flawless. Why don't try a javascript carousel for this like this one, with this you can also animate it and more stuff: http://www.gmarwaha.com/jquery/jcarousellite/#demo 
0
ChristoferDutzCommented:
One solution would be to place the images in divs and set the "float: left" css style.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

eejonesCommented:
ChristoferDutz:

Before I posted earlier, II tried the float:left and it did not work. Can you see what is wrong with this attempt?

<div style="border:solid 1px blue; overflow-x:auto; overflow-y:hidden; height:125px; width:500px;">
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
</div>
0
linuxroxAuthor Commented:
this i believe is the easiest and best option.
thanks again guys for the help and ideas.
0
ChristoferDutzCommented:
Well I would assume, that you shoul propably surround everything with a big div, widening the layout ragne for the floats ...

I just made the div quite a little larger to be sure everything fits in.
<div style="border:solid 1px blue; overflow-x:auto; overflow-y:hidden; height:125px; width:500px;"> 
<div style="height:110;width:500">
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
<div style="float:left;border:solid 1px orange;height:100;width:100"><img src="1.gif" height=100 width=100 border=0 /></div>
</div>
</div>

Open in new window

0
eejonesCommented:
ChristoferDutz:

That code did not work for me. I am using Chrome. Perhaps that is the problem. Chrome behaves more like Safari, quite often.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.