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!

Mark Steggles

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

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.

Eternal_Student

ASKER

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

VirusMinus

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Eternal_Student

ASKER

Nice, that works for me.

I don't know why I am always reluctant to use positioning.

Mark Steggles

@VM, Im back!

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

Best wishes

Eternal_Student

ASKER

Thanks guys.