Div with Horizontal Scrolling Only

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

CSS div element - how to show horizontal scroll bars only?

You shouldn't get both horizontal and vertical scrollbars unless you make the content large enough to require them.

However you typically do in IE due to a bug. Check in other browsers (Firefox etc.) to find out whether it is in fact only IE that is doing it.

IE6-7 (amongst other browsers) supports the proposed CSS3 extension to set scrollbars independently, which you could use to suppress the vertical scrollbar:

overflow: auto;
overflow-y: hidden;

You may also need to add for IE8:

-ms-overflow-y: hidden;

as Microsoft are threatening to move all pre-CR-standard properties into their own ‘-ms’ box in IE8 Standards Mode. (This would have made sense if they'd always done it that way, but is rather an inconvenience for everyone now.)

On the other hand it's entirely possible IE8 will have fixed the bug anyway.

Horizontal scrolling within a div

Set white-space:nowrap and overflow:auto on outer div.

Set display:inline-block on inner div, and remove float.

#outer {  border: 13px solid #bed5cd;  overflow-x: auto;  overflow-y: hidden;  white-space: nowrap;}#inner {  display: inline-block;  white-space: normal;  width: 20em;  padding: 10px;  margin: 20px;}

<div id="outer">  <div id="inner">    data  </div>  <div id="inner">    data  </div>  <div id="inner">    data  </div></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 can I make a div scroll horizontally

Is this what you're looking for?

.outer {    width: 500px;    height: 100px;    white-space: nowrap;    position: relative;    overflow-x: scroll;    overflow-y: hidden;    -webkit-overflow-scrolling: touch;}
.outer div {    width: 24.5%;    background-color: #eee;    float: none;    height: 90%;    margin: 0 0.25%;    display: inline-block;    zoom: 1;}

<div class="outer">    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div></div>

Make one very wide div horizontally scroll without affecting the rest of the page

Try this

<div style="width: 100vw; overflow-x: auto;">
    <table>
    </table>
</div>

Horizontally scrollable div inside full width div

You can do it with Flexbox:

.outer {
  display: flex; /* displays flex-items (children) inline */
  overflow-x: auto;
}

.inner {
  flex: 0 0 25%; /* doesn't grow nor shrink, initial width set to 25% of the parent's */
  height: 1em; /* just for demo */
}

<div class="outer">
  <div class="inner" style="background: red"></div>
  <div class="inner" style="background: green"></div>
  <div class="inner" style="background: blue"></div>
  <div class="inner" style="background: yellow"></div>
  <div class="inner" style="background: orange"></div>
</div>

How to make independent horizontal scrolling on a div container?

What you're looking for is the CSS property overflow-x which will allow you to specify the overflow behavior with CSS.

Here is MDN's documentation on this property.

The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.

Update

Here is a working example of what you are asking for. If I'm not understanding your question, please let me know.

.padding {
  padding:25px;
}

.container {
  max-width:400px;
}

.child-container {
  background:#dedede;
  overflow-x:scroll
}

.child-item {
  min-width: 500px;
}

<div class="container padding" style="background:#ededed;">
  <div class="padding">
    <h1>Parent</h1>
  </div>
  <div class="child-container padding">
    <div class="child-item">
      <h1>Hello world</h1>
    </div>
  </div>
</div>

Div with Horizontal Scrolling Only