Home/ Questions/Q 6055175
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T08:14:10+00:00

I’m trying to get my DIV to display only a horizontal scrollbar. I am

  • 0

I’m trying to get my DIV to display only a horizontal scrollbar. I am filling up the DIV with lots of images, and only want the user to be able to scrol horizontally.

But I have two problems:

One tutorial I read gave me some code (which I no longer have), that says it will display the scrollbar. But it didn’t. And it also made the images appear beneath each other. So I scrapped that code.

Another tutorial gave me the ‘look’ that I wanted, but without the scrollbars. But the scrollbars were supposed to appear!

How can I have a DIV, full of pics and a Horizontal Scrollbar?

Here’s what I have so far:

CSS: (dude.css)

.EditorialImagePaneOne
{
    width: 500px

    -ms-overflow-x:scroll;
      overflow-x:scroll;
    white-space:nowrap;

}

.ShowcaseImage
{
    height: 407px;
}

HTML: (Index.html)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
    <link rel="stylesheet" href="../Assets/CSS/dude.css" />
        <title></title>
    </head>
    <body>

    <div class="EditorialImagePaneOne">
        <img src="../Assets/Images/Editorial/1-1.jpg" class="ShowcaseImage" />
        <img src="../Assets/Images/Editorial/1-2.jpg" class="ShowcaseImage" />
        <img src="../Assets/Images/Editorial/1-3.jpg" class="ShowcaseImage" />
        <img src="../Assets/Images/Editorial/1-4.jpg" class="ShowcaseImage" />
        <img src="../Assets/Images/Editorial/1-5.jpg" class="ShowcaseImage" />
        <img src="../Assets/Images/Editorial/1-6.jpg" class="ShowcaseImage" />
        <img src="../Assets/Images/Editorial/1-7.jpg" class="ShowcaseImage" />
        <img src="../Assets/Images/Editorial/1-8.jpg" class="ShowcaseImage" />
    </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Maybe you miss something like the DOCTYPE in the page.. make sure to have this as the very first line in your code, above the <html> line:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    • 0