CSS horizontal scroll

Question

I'm trying to create a <div> with a series of photos which are horizontally scrollable only.

It should look something like this LINK;

However the above is only achieved by specifying a width for the <div> which contains the photos (so they don't 'word-wrap'). If I don't put a width - it looks like this;LINK

What can I do using CSS to prevent putting in a fixed width as the images may vary.

Thanks

Black · Accepted Answer · 2021-10-04 10:03:31Z

131

You can use display:inline-block with white-space:nowrap. Write like this:

.scrolls {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 80px;
    white-space:nowrap;
}
.imageDiv img {
    box-shadow: 1px 1px 10px #999;
    margin: 2px;
    max-height: 50px;
    cursor: pointer;
    display:inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
    vertical-align:top;
 }

Check this http://jsfiddle.net/YbrX3/

edited Oct 4, 2021 at 10:03

Black

20.9k47 gold badges188 silver badges300 bronze badges

answered Mar 29, 2012 at 13:01

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Atul Dhanuka Over a year ago

@sandeep plz help me out i used ur css which is in jsfiddle and suppose some data r cuming dynamically by ajax callin which is storing in button which is in footer now how i can scroll that button not window page only footer

Edwin Evans Over a year ago

How to also support scrolling by grabbing an image and dragging left/right?

Mystus Over a year ago

white-space:nowrap was the answer for me.

Barnee · Accepted Answer · 2025-05-05 06:46:48Z

19

Here's a solution with flexbox for images with variable width and height:

.container {
  display: flex;
  flex-wrap: no-wrap;
  overflow-x: auto;
  margin: 20px;
}
img {
  flex: 0 0 auto;
  width: auto;
  height: 100px;
  max-width: 100%;
  margin-right: 10px;
}

<div class="container">
 <img src="https://placehold.co/100x100" />
 <img src="https://placehold.co/50x50" />
 <img src="https://placehold.co/5x50" />
 <img src="https://placehold.co/100x50" />
 <img src="https://placehold.co/50x100" />
 <img src="https://placehold.co/20x50" />
 <img src="https://placehold.co/50x30" />
 <img src="https://placehold.co/50x150" />
 <img src="https://placehold.co/250x50" />
 <img src="https://placehold.co/150x350" />
 <img src="https://placehold.co/50x350" />
 <img src="https://placehold.co/100x100" />
 <img src="https://placehold.co/50x50" />
 <img src="https://placehold.co/5x50" />
 <img src="https://placehold.co/100x50" />
 <img src="https://placehold.co/50x100" />
 <img src="https://placehold.co/20x50" />
 <img src="https://placehold.co/50x30" />
 <img src="https://placehold.co/50x150" />
 <img src="https://placehold.co/250x50" />
 <img src="https://placehold.co/150x350" />
 <img src="https://placehold.co/50x350" />
</div>

edited May 5 at 6:46

answered Dec 14, 2020 at 12:38

Barnee

3,4698 gold badges47 silver badges57 bronze badges

1 Comment

Maxime Esnol Over a year ago

Thanks! Much better and more modern solution to the problem, this should be the accepted answer in 2023.

FrameWorker · Accepted Answer · 2014-02-11 17:52:59Z

Use this code to generate horizontal scrolling blocks contents. I got this from here http://www.htmlexplorer.com/2014/02/horizontal-scrolling-webpage-content.html

<html>
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title>
<head>
<style type="text/css">
#outer_wrapper {  
    overflow: scroll;  
    width:100%;
}
#outer_wrapper #inner_wrapper {
    width:6000px; /* If you have more elements, increase the width accordingly */
}
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
    width: 250px;
    height:300px;
    float: left;
    margin: 0 4px 0 0;
    border:1px grey solid;
}
</style>
</head>
<body>

<div id="outer_wrapper">
    <div id="inner_wrapper">
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
             <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
             <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <!-- more boxes here -->
    </div>
</div>
</body>
</html>

phoenisx · Accepted Answer · 2015-07-02 11:40:46Z

0

try using table structure, it's more back compatible. Check this outHorizontal Scrolling using Tables

answered Jul 2, 2015 at 11:40

phoenisx

1,6991 gold badge19 silver badges32 bronze badges

Collectives™ on Stack Overflow

CSS horizontal scroll

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related