Link to home
Avatar of Eternal_Student
Eternal_StudentFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Horizontal scrolling div

I am stumped here guys.

Consider the following:

#ScrollWrapper {
width: 677px;
height: 141px;
background:#000000;
}

#apparelScroll {
width: 100%;
height: 141px;
background:#000000;
text-align:left;
overflow-y:hidden;
overflow-x:scroll;
text-align:left;
}

#apparelScroll img {
display:block;
padding: 0px;
border: 2px solid #ffffff;
margin: 5px;
float:left;
}

Now if the images in the div expand beyond 677px I want the div to scroll horizontally.

Is this possible using purely css? I suppose anything is possible!
Avatar of Mark Steggles
Mark Steggles
Flag of United States of America image

Hello,

This works for me:

<div style="height:141px;width:677px;overflow-y:hidden;overflow-x:scroll;">
<img src="image.jpg" style="width:1000px;float:left;">
</div>

What happens when you view your page? What is the problem with your code?

Regards

 
Avatar of Eternal_Student

ASKER

Im actually floating multiple divs next to each other with a width of 300px and when it gets to the third column [which equates to more than 677px] the third column goes on a new line, underneath.

This is what I mean Steggs:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
      .float{width:300px; height:141px; float:left}
</style>
</head>

<body>

<div style="height:141px;width:677px;overflow-y:hidden;overflow-x:scroll; border:1px solid">
      <div class="float">
            Here we go
      </div>
      <div class="float">
            Here we go
      </div>
      <div class="float">
            Here we go
      </div>
</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
Avatar of VirusMinus
VirusMinus
Flag of Australia image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Nice, that works for me.

I don't know why I am always reluctant to use positioning.
@VM, Im back!

@Eternal_Student: Glad that a solution was found for you Eternal Student

Best wishes
Thanks guys.