scorllable div

how to make the div with many images scroll-able in one row in responsive web design ? i do not want to see the scroll bars.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div style="width:300px;overflow-x: hidden;">
<img src="1.gif" width="100" /><img src="2.gif"  width="100" /><img src="1.gif"  width="100" /><img src="3.gif"  width="100" /><img src="4.gif"  width="100" /><img src="5.gif"  width="100" /><img src="6.gif"  width="100" /><img src="7.gif"  width="100" /><img src="8.gif"  width="100" /><img src="9.gif"  width="100" /><img src="10.gif" width="100"  />
</div>
</body>
</html>
codelevelAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

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

Russ SuterSenior Software DeveloperCommented:
You mean something like this?

http://jsfiddle.net/qcv5Q/789/
codelevelAuthor Commented:
thanks.
no. i wanted in one row, in mobile should be able to swipe right to see the hidden content .
Slick812Commented:
greetings  codelevel, , In mobil (touchscreen) as well as desktop, if you set a <div> to CSS  -
    overflow: auto;
it will do the scroll (touch move-scroll div contents), however, this does not change the way a <div> with images in it (in your code) will order-display the several <img> . . . To have <div> contents to be horizontally scroll-able, You will need an image container (another <div>) inside that <div> that has a Width set in CSS to equal the total width (margins included) of all the images.

Here is my code to have your image Div be scroll-able -
<style>
.imgDiv{
  width:633px;
  height:155px;
  border:2px solid #090;
  background-color:#777;
  padding-top: 2px;
  margin:3px;
  overflow: auto;
  }

.imgDiv div{
  height: 150px;
  width: 1233px;
  background-color:#777;
  border:1px solid #800;
  }

.imgDiv img{
  width: 150px;
  height: 150px;
  border-left:2px solid #555;
  border-right:2px solid #555;
  }
</style>

<div class="imgDiv">
<div><img src="images3/thumb1.jpg" /><img src="images3/thumb2.jpg" /><img src="images3/thumb3.jpg" /><img src="images3/thumb4.jpg" /><img src="images3/thumb5.jpg" /><img src="images3/thumb6.jpg" /><img src="images3/thumb7.jpg" /><img src="images3/thumb8.jpg" /></div>
</div>

Open in new window


this has 8 images, that are all Thumbs in a same-size format of 150px x 150px with a left and right border of 2px, so the width of the container <div> is set to 8 X 154 as 1232px , and I added a px for some box-model safety so the css is  width: 1233px;
All of the images are set to width and height 150px  with a left and right border to show the separation between the images.

In touch screen devices (cell phones) scroll bars not shown, so for this I have the  .imgDiv  height as -
    height:155px;

However in Non-touchscreen desktop browsers, the scroll-bars are usually shown, so the .imgDiv  height will not seen to match, as the scroll-bars will subtract from the view height.

I hope is is something like you need?  Let me know if it is not workin 4 u .

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

From novice to tech pro — start learning today.