How to keep multiple images on the same line inside a div with undeneath scroll bar

HTML & CSS
1

Hi i have a div that i set the with a width i want to have a scroll bar under
i have multiple images that i want all to be in one line but everytime the images run out space in the line it goes under i have tried float left but the image still goes under is there a way of keep in the same line inside a scrollable i am trying to avoid tables?

    <div style="width:830; background-color:white; height:120px; overflow:scroll; overflow-x: scroll;overflow-y: hidden;">

      <img style=" float:left; display:inline" src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
      <img style=" float:left; display:inline"  src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
      <img style=" float:left; display:inline"  src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
      <img style=" float:left; display:inline"  src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
      <img style=" float:left; display:inline"   src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
      <img style=" float:left; display:inline"   src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />


    </div>
2

You could do something like this:

<div style="width:830px; background-color:white; height:120px; overflow:auto;">
		<div style="width: 2000px; height: 90px;">
			<img src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
			<img src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
			<img src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
			<img src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
			<img src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
			<img src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
			<img src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
			<img src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
			<img src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
			<img src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
		</div>
	</div>

So, have an inner div with a big width wide enough to hold all the images.

3

Seems to me that you have a div with overflow hidden, but nothing within that div is causing a scroll bar to be needed, nothing that exceeds the width of the container div, so the images are naturally wrapping.

Try this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>

<body>    <div style="width:750px; background-color:white; height:120px; overflow:scroll; overflow-x: scroll; overflow-y: hidden;">
       <div style="width:1000px;">
      <img style=" float:left; display:inline" src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
      <img style=" float:left; display:inline"  src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
      <img style=" float:left; display:inline"  src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
      <img style=" float:left; display:inline"  src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
      <img style=" float:left; display:inline"   src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
      <img style=" float:left; display:inline"   src="images_news/image1.gif" width="160" height="90" alt="bbc news special" /></div>


    </div>
</body>
</html>
4

Yeah, what ralph said.

5

This should explain all your options http://www.visibilityinherit.com/code/scroller.php

6

That’s even better. Thanks for the link.

7

Thank you very much guys all you r ways worked wonderfully thank you

8

You’re welcome. Personally, I would use one of the techniques from the link because it allows you to have less structural markup, always a good thing. Just to let you know, I goofed by setting overflow:scroll and keeping the overflow-x and y. I would just do “overflow:scroll” for both in that case, since if you get an image that is too large a height, the user would not be able to see it if you have y set to hidden. I wouldn’t hide an image just to keep it clean, as it restricts the user from obtaining useful content. I would just make sure the images are the same height in the first place.