Stumped! A horizontal scrolling div?

cherrio · 14-05-2010 1:26pm #1

Hey All,

I am totally stumped! All I want is a div that has a bunch of nested div and it to scroll horizontally. Using float: left and overflow-y: hidden; I have been able to get it to show a few divs, beside each other, but it just wraps to the next line.

I have tried using display: inline and a bunch of other things, but no effect:(

Needs to work in IE and FF, want divs to be fixed width.

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb=
"http://www.facebook.com/2008/fbml">
<head>
<title>
Test Page
</title>
<style>
#makesTable
{
width: 700px;
height: 80px;
overflow-y: hidden;
overflow-x: scroll;
white-space: nowrap;
position: relative;

}
.makesCell
{
width: 80px;
float: left;
display: inline;
position: relative;
}
</style>

</head>
<body>
<div id="makesTable">
<div class="makesCell">
G500<br />
<a href="#"><img width="80" src=
"/images/Eten/G500"
alt="Eten G500" /></a>
</div>
<div class="makesCell">
G500+<br />
<a href="#"><img width="80" src=
"/images/Eten/G500%2B"
alt="Eten G500+" /></a>
</div>
<div class="makesCell">
glofiish DX900<br />

<a href="#"><img width="80" src=
"/images/Eten/glofiish+DX900"
alt="Eten glofiish DX900" /></a>
</div>
<div class="makesCell">
glofiish M700<br />
<a href="#"><img width="80" src=
"/images/Eten/glofiish+M700"
alt="Eten glofiish M700" /></a>
</div>
<div class="makesCell">
glofiish M750<br />

<a href="#"><img width="80" src=
"/images/Eten/glofiish+M750"
alt="Eten glofiish M750" /></a>
</div>
<div class="makesCell">
glofiish M800<br />
<a href="#"><img width="80" src=
"/images/Eten/glofiish+M800"
alt="Eten glofiish M800" /></a>
</div>
<div class="makesCell">
glofiish M800<br />

<a href="#"><img width="80" src=
"/images/Eten/glofiish+M800"
alt="Eten glofiish M800" /></a>
</div>
<div class="makesCell">
glofiish M810<br />
<a href="#"><img width="80" src=
"/images/Eten/glofiish+M810"
alt="Eten glofiish M810" /></a>
</div>
<div class="makesCell">
glofiish V900<br />

<a href="#"><img width="80" src=
"/images/Eten/glofiish+V900"
alt="Eten glofiish V900" /></a>
</div>
<div class="makesCell">
glofiish X500<br />
<a href="#"><img width="80" src=
"/images/Eten/glofiish+X500"
alt="Eten glofiish X500" /></a>
</div>
<div class="makesCell">
glofiish X500+<br />

<a href="#"><img width="80" src=
"/images/Eten/glofiish+X500%2B"
alt="Eten glofiish X500+" /></a>
</div>
<div class="makesCell">
glofiish X600<br />
<a href="#"><img width="80" src=
"/images/Eten/glofiish+X600"
alt="Eten glofiish X600" /></a>
</div>
<div class="makesCell">
glofiish X610<br />
<a href="#"><img width="80" src=
"/images/Eten/glofiish+X610"
alt="Eten glofiish X610" /></a>
</div>
</div>
</body>
</html>
[/HTML]

Thanks in advance.

Liam Byrne · 14-05-2010 2:49pm

Firstly, lose the "position:relative"

And secondly, set another <div> between the makesTable and makesCell that has the full combined width of the makesCell divs (e.g. if you have ten of them, then the width of the new div will be 10x80, i.e. 800.

At the moment, you have the "viewport" (makesCell) that controls the visual width, but you have nothing that indicates the actual width of the full "scrollable" area, so the browser will try to wrap it.

Also, check the browser compatibility of "overflow-x".......I don't think it's 100% cross-browser......you're better using "overflow" and then setting the height of the new div to 80px so that it can't trigger the vertical scrollbar.

tonyennis · 14-05-2010 3:04pm

Did this for a site recently. My solution was fairly simple.

<div style="width:divwidth;height:110px;overflow:auto">

<div style="width:internalcontentwidth;height:110px;">

Content Goes Here

</div>

</div>

Obviously you should replace "divwidth" and "internalcontentwidth" with your own values.

You can see it in action here

Click on the download section, images are horizontally scrolled.

Hope this helps,

Tony

cherrio · 14-05-2010 3:57pm

Thanks Liam/Tony, your suggestion worked perfectly:)

Stumped! A horizontal scrolling div?

Comments