How to have horizontal scroll in a div with responsive width

Question

I want to have one <div> with id that has horizontal scroll, but the problem is it has to be responsive, not with fixed width.

html, body {margin: 0; padding: 0;}

#myWorkContent{
    width:530px;
    height:210px;
    border: 13px solid #bed5cd;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

#myWorkContent a {
    display: inline-block;
    vertical-align: middle;
}

#myWorkContent img {border: 0;}

<div id="myWorkContent">
     <a href="assets/work/1.jpg"><img src="http://placekitten.com/200/200/" height="190"></a>
     <a href="assets/work/2.jpg"><img src="http://placekitten.com/120/120/"/></a>
     <a href="assets/work/3.jpg"><img src="http://placekitten.com/90/90/" height="90" width="90"></a>
     <a href="assets/work/4.jpg"><img src="http://placekitten.com/50/50/" height="190"></a>
     <a href="assets/work/5.jpg"><img src="http://placekitten.com/100/100/"></a>
     <a href="assets/work/6.jpg"><img src="http://placekitten.com/200/200/" height="190"></a>
</div><!-- end myWorkContent -->

Thanks to http://jsfiddle.net/clairesuzy/FPBWr/

The problem is with that 530px. I would like to use 100% instead. But then I got page scroll and scroll of the DIV goes right, can not get it, any idea?

TylerH · Accepted Answer · 2025-06-27 16:33:22Z

99

Just set your width to auto:

#myWorkContent{
    width: auto;
    height:210px;
    border: 13px solid #bed5cd;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

This way your div can be as wide as possible, so you can add as many kitty images as possible ;3

Your div's width will expand based on the child elements it contains.

JSFiddle demo

edited Jun 27 at 16:33

TylerH

21.3k84 gold badges84 silver badges122 bronze badges

answered Oct 8, 2013 at 19:57

nkmol

8,1193 gold badges34 silver badges55 bronze badges

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

2 Comments

Roko C. Buljan Over a year ago

+1. The problem was the DIV's border added to the 100%. "auto" is the right way to do it.

Giovanni Silveira Over a year ago

It depends. width: auto; will adjust to less than 100% if there is not enough content. If he wants it to always be 100% width, he should set the box-sizing property, as per my response below.

Manohar Reddy Poreddy · Accepted Answer · 2015-06-18 10:16:11Z

12

Below worked for me.

Height & width are taken to show that, if you 2 such children, it will scroll horizontally, since height of child is greater than height of parent scroll vertically.

Parent CSS:

.divParentClass {
    width: 200px;
    height: 100px;
    overflow: scroll;
    white-space: nowrap;
}

Children CSS:

.divChildClass {
    width: 110px;
    height: 200px;
    display: inline-block;
}

To scroll horizontally only:

overflow-x: scroll;
overflow-y: hidden;

To scroll vertically only:

overflow-x: hidden;
overflow-y: scroll;

answered Jun 18, 2015 at 10:16

Manohar Reddy Poreddy

28k10 gold badges170 silver badges150 bronze badges

Comments

Giovanni Silveira · Accepted Answer · 2013-10-08 19:55:21Z

1

Just make sure you add box-sizing:border-box; to your #myWorkContent.

http://jsfiddle.net/FPBWr/160/

answered Oct 8, 2013 at 19:55

Giovanni Silveira

1,2818 silver badges7 bronze badges

1 Comment

Giovanni Silveira Over a year ago

On this example, I'd replace the height:210px; with height:auto; as well, so that the pictures wouldnt get cut off.

user1 · Accepted Answer · 2013-10-08 19:55:54Z

0

use max-width instead of width

max-width:530px;

demo:http://jsfiddle.net/FPBWr/161/

answered Oct 8, 2013 at 19:55

user1

1,0651 gold badge8 silver badges29 bronze badges

Comments

user3662981 · Accepted Answer · 2014-05-22 00:10:13Z

I figured it this way:

* { padding: 0; margin: 0 }
body { height: 100%; white-space: nowrap }
html { height: 100% }

.red { background: red }
.blue { background: blue }
.yellow { background: yellow }

.header { width: 100%; height: 10%; position: fixed }
.wrapper { width: 1000%; height: 100%; background: green }
.page { width: 10%; height: 100%; float: left }

<div class="header red"></div>
<div class="wrapper">
    <div class="page yellow"></div>
    <div class="page blue"></div>
    <div class="page yellow"></div>
    <div class="page blue"></div>
    <div class="page yellow"></div>
    <div class="page blue"></div>
    <div class="page yellow"></div>
    <div class="page blue"></div>
    <div class="page yellow"></div>
    <div class="page blue"></div>
</div>

I have the wrapper at 1000% and ten pages at 10% each. I set mine up to still have "pages" with each being 100% of the window (color coded). You can do eight pages with an 800% wrapper. I guess you can leave out the colors and have on continues page. I also set up a fixed header, but that's not necessary. Hope this helps.

Collectives™ on Stack Overflow

How to have horizontal scroll in a div with responsive width

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Linked

Related