Horizontal Scroll in Div with Many Small Div's Inside (No Text)

  • Home
  • Languages
  • CSS
  • Horizontal Scroll in Div with Many Small Div's Inside (No Text)

Horizontal scroll in DIV with many small DIV's inside (no text)

Wrap your smaller divs in a third div that has a greater width than your main div like so. Assuming I understood your question correctly no jquery is needed. 

<html>
    <head>
        <style type="text/css">       
            .div_1
            {

                height: 350px;
                width: 350px;
                margin: auto;
                border: 1px black solid;
                overflow-y: hidden;
                overflow-x: scroll;
            }

            .div_3
            {
                float: left;
                height: 350px;
                width: 500px;
                margin: auto;
                border: 1px black solid;
                overflow-y: hidden;
                overflow-x: scroll;
            }

            .div_2
            {
                height: 100px;
                width: 100px;
                border: 1px solid #A2A2A2;
                float: left;
            }
        </style>
    </head>

    <body>
        <div class="div_1">
            <div class="div_3">
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
            </div>
        </div>
    </body>
</html>

Multiple divs within a div — horizontal scolling

The button in this example will insert a new div with a randomized width, eventually resulting in horizontal scrolling. Points of interest: white-space: nowrap and overflow: scroll on the container; display: inline-block on the child divs.

var container = document.getElementById('items');
function addItem() {  var d = document.createElement('div');  d.style.width = Math.floor(Math.random() * 100) + 20 + 'px';  container.appendChild(d);}
#items {  white-space: nowrap;  overflow:scroll;}
#items div {  display: inline-block;  border: 1px solid red;  height: 50px;}
<button onclick="addItem()">Add Item</button>
<div id="items"></div>

HTML Horizontal Scrolling within DIV without page scrolling

You could solve this using Flexbox.

I changed display: inline to display: flex. Not really sure why inline was chosen, because it really makes your div behave like a span. Also, overflow-x: auto because you would want the scrollbar only when overflow happens.

body .contained {
  overflow-x: auto;
  display: flex;
  width: 100%;
}

Also added flex-shrink: 0 and removed float: left to the .card. More on this change on this question

<!DOCTYPE html>
<html lang="enUS">

<head>
  <style>
    body {
      overflow-x: hidden;
      overflow-y: auto;
    }
    
    body .contained {
      overflow-x: auto; /* MODIFIED */
      display: flex; /* MODIFIED */
      width: 100%;
    }
    
    .card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      width: 200px;
      text-align: center;
      border-radius: 25px;
      background-color: AliceBlue;
      border-style: solid;
      border-width: .5px;
      margin-right: 10px;
      /* float: left; /* REMOVED */
      flex-shrink: 0; /* ADDED */
      overflow: none;
    }
    
    .title {
      color: grey;
      font-size: 18px;
    }
    
    h1 {
      background-color: PowderBlue;
      border-radius: 25px 25px 0px 0px;
      margin-top: 0px;
    }
    
    a {
      text-decoration: none;
      font-size: 22px;
      color: black;
    }
    
    button:hover,
    a:hover {
      opacity: 0.7;
    }
    
    .float-container {
      padding: 20px;
      background-color: White;
    }
  </style>
</head>

<body>

  <div class="contained">
    <div class="card">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist</p>
      <p>Information Systems</p>
    </div>

    <div class="card" id="div2">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist</p>
      <p>Information Systems</p>
    </div>
    <div class="card" id="div2">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>
    <div class="card" id="div2">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>
    <div class="card" id="div2">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>
    <div class="card" id="div2">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>
    <div class="card" id="div2">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>
  </div>
  <div>
    <div class="card" id="div3">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>
    <div class="card" id="div3">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>
    <div class="card" id="div3">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>
    <div class="card" id="div3">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>
    <div class="card" id="div3">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>
    <div class="card" id="div3">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>

  </div>

</body>

</html>

How to make multiple divs to scroll horizontally?

You need to set overflow-x:scroll; and overflow-y: hidden; on parent, and white-space:nowrap; on inner div and also display: inline-block; on floatLeft

.container {  width: 480px;   height: 140px;   border: 1px solid green;  overflow-x: scroll;  overflow-y: hidden;}
.inner {  height: 100%;  white-space:nowrap; }
.floatLeft {  width: 200px;  height: 92px;   margin:10px 10px 50px 10px;   display: inline-block;}
img {  height: 100%;}
<div class="container">   <div class="inner">       <div class="floatLeft">           <img src="http://placehold.it/350x150" class="tile">       </div>       <div class="floatLeft">           <img src="http://placehold.it/350x150" class="tile">       </div>       <div class="floatLeft">           <img src="http://placehold.it/350x150" class="tile">       </div>   </div></div>

Getting a horizontal scroll bar within a 100% div

Your cal_scroller class is 100% + 20px (padding) wide. Use a margin on cal_container instead, like so:

.cal_scroller {
    padding: 10px 0;
    overflow: auto;
    width: 100%;
}

.cal_container {
    margin: 0 10px;
    width: 935px;
}

See here for a description of how the box model works (in short, the everything is outside the width/height of an element).

Also, block elements (like <div>s) are 100% width by default, making your 100% width declaration redundant.

Div with horizontal scrolling only

The solution is fairly straight forward. To ensure that we don't impact the width of the cells in the table, we'll turn off white-space. To ensure we get a horizontal scroll bar, we'll turn on overflow-x. And that's pretty much it:

.container {
    width: 30em;
    overflow-x: auto;
    white-space: nowrap;
}

You can see the end-result here, or in the animation below. If the table determines the height of your container, you should not need to explicitly set overflow-y to hidden. But understand that is also an option.

Sample Image

Scrolling tables horizontally without wrapping them in div

I found this solution but unfortunately it doesn't work in IE, not even IE9.

table{
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

Exaple fiddle

In the end, I think your JS solution would be the best if you want to avoid the hassle of changing the markup in your files.

How to apply horizontal scrolling in multiple div on a single button click?

Since I can't see your HTML & CSS code I had to imagine what you need. Next come my code:

let pptoms = Array.from(document.querySelectorAll(".pptom"))
pptoms.map((p) =>{  p.divs = Array.from(p.querySelectorAll(".box"))})
let count = 7;pptoms.map((p) =>{  p.divs[count].scrollIntoView();})

let radios = Array.from(document.querySelectorAll("#controls [name='count']"));
radios.map((r) =>{  r.addEventListener("change",()=>{    count = parseInt(r.value);    console.log(count)    pptoms.map((p) =>{      p.divs[count].scrollIntoView();    })  })})
.box {  border: 1px solid;  width: 5em;  height:2em;  line-height:2em;  text-align: center;  display: inline-block;}
.container{width:50em;}
.pptom{  width:15em;   border:1px solid red;   overflow:scroll;   margin: .5em;}
<div class="pptom"><div class="container"><div class ="box">box a 0</div><div class ="box">box a 1</div><div class ="box">box a 2</div><div class ="box">box a 3</div><div class ="box">box a 4</div><div class ="box">box a 5</div><div class ="box">box a 6</div><div class ="box">box a 7</div><div class ="box">box a 8</div></div></div> <div class="pptom"><div class="container"><div class ="box">box b 0</div><div class ="box">box b 1</div><div class ="box">box b 2</div><div class ="box">box b 3</div><div class ="box">box b 4</div><div class ="box">box b 5</div><div class ="box">box b 6</div><div class ="box">box b 7</div><div class ="box">box b 8</div></div></div>
<form id="controls">  <label><input type="radio" name="count" value="0"  />0</label>  <label><input type="radio" name="count" value="7" checked />7</label>   <label><input type="radio" name="count" value="8"  />8</label> </form>

Horizontal scrollable div's in a bootstrap row

Please check. Is it what you want to achieve?

horizontal scrolling

CodePen  • 
JSFiddle

/* The heart of the matter */
.testimonial-group > .row {
  overflow-x: auto;
  white-space: nowrap;
}
.testimonial-group > .row > .col-xs-4 {
  display: inline-block;
  float: none;
}

/* Decorations */
.col-xs-4 { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; }
.col-xs-4:nth-child(3n+1) { background: #c69; }
.col-xs-4:nth-child(3n+2) { background: #9c6; }
.col-xs-4:nth-child(3n+3) { background: #69c; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container testimonial-group">
  <div class="row text-center">
    <div class="col-xs-4">1</div><!--
 --><div class="col-xs-4">2</div><!--
 --><div class="col-xs-4">3</div><!--
 --><div class="col-xs-4">4</div><!--
 --><div class="col-xs-4">5</div><!--
 --><div class="col-xs-4">6</div><!--
 --><div class="col-xs-4">7</div><!--
 --><div class="col-xs-4">8</div><!--
 --><div class="col-xs-4">9</div>
  </div>
</div>

Related Topics

Is There a CSS Selector for an Img Which Has Been Constrained by Max-Width or Max-Height

Less: Can You Group a CSS Selector with a Media Query

100% Width Div Gets Cut Off When I Scroll Right If My Browser Window Is Smaller Than Div's Content

What Transition-Property to Use for Transform

Simulate "Inner Border" in CSS

Margin to Apply to Position Div After Skewing with CSS Transform

React Table with Static Header on Browser Scroll

Html5 Page 100% Height Issue

Should Flex Item Overflow the Flex Container Instead of Breaking Lines

Gradients Hidden Using Svg Symbols

Bootstrap CSS Space Between Buttons in Navbar

Double Ampersand in Less

How to Minify CSS Files with Requirejs

Unset Width to Revert Back to Inline HTML Attribute "Width=Xx"

Delaying CSS3 Animations

Make CSS Shimmer Effect Work an Already Loaded Image

Fluid Navigation Items of Different Widths with Equidistant Spacing

Page Content Don't Scroll When Keyboard Shows Phonegap


Leave a reply



Submit