Are you in favor of side-to-side scrolling?

Question

Are you in favor of side-to-side scrolling?

I can't quite recall where I've encountered this concept before, but I do know that there must be a method for creating a horizontal scroll.

Imagine you have multiple DIVs in the following structure:

<div class="container">
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
</div>

I am searching for a way to align them horizontally without causing them to shift to the next line. Instead, I would like there to be a horizontal scroll bar rather than a vertical one.

Usually, if I were to use float:left or display:inline, once the divs take up sufficient space horizontally, they would move to the next line. Is there any solution to keep them in a straight horizontal line and create a horizontal scroll for overflow?

html css

Answer 1

Answer №1

Here is a solution that should do the trick:

<div class="wrapper">
  <div class="scroll-box">
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>
</div>

<style>
.wrapper {
  width:150px;
  overflow:auto;
}
.scroll-box {
  width:750px;
}
.item {
  width:150px;
  float:left;
}
</style>

Answer 2

Here is a solution that should do the trick:

<div class="wrapper">
  <div class="scroll-box">
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>
</div>

<style>
.wrapper {
  width:150px;
  overflow:auto;
}
.scroll-box {
  width:750px;
}
.item {
  width:150px;
  float:left;
}
</style>

Answer 3

Answer №2

Forget about setting the width in CSS - it's not necessary. It's a hassle because you have to keep adjusting the width every time you add a new element. Instead, just apply the .container class with a white-space: nowrap rule and set its children to display: inline-block. Like this:

.container {
    white-space: nowrap;
}

.container > div {
    display: inline-block;
}

With this setup, you won't need to worry about setting widths for horizontal scrolling.

Answer 4

Forget about setting the width in CSS - it's not necessary. It's a hassle because you have to keep adjusting the width every time you add a new element. Instead, just apply the .container class with a white-space: nowrap rule and set its children to display: inline-block. Like this:

.container {
    white-space: nowrap;
}

.container > div {
    display: inline-block;
}

With this setup, you won't need to worry about setting widths for horizontal scrolling.

Are you in favor of side-to-side scrolling?

Answer №1

Answer №2

Similar questions

increase the number of rows in the table automatically

Calculate the sum of a column in a table that is dynamically populated

What are the best ways to create image animations on top of other images using CSS or JavaScript?

How to eliminate vertical spacing between rows in Bootstrap?

Managing access to HTML pages on Tomcat 5.5 through tokens

Original text: Default SVG styleRewritten text

Incorporating Blank Class into HTML Tag with Modernizr

Is there a technique I could use to create a visual effect like zooming, but without altering the dimensions of the image?

When an image is hovered over, the HTML background undergoes a transformation

Why does my 'click' event listener only work for the first two <li>'s and not the others?

Tips for organizing nested form rows with Bootstrap 4

Issue with hamburger icon in Bootstrap navbar following height adjustment of the navbar

submitting image data from HTML5 canvas using an HTML post request

During the click event, two distinct $.ajax requests interfere and cancel each other out

What is the best way to retrieve a PDF file from another website and showcase it on our own site without any redirection?

What is the best method for designing a filtering menu with a "Narrow By" option?

JavaScript: Controlling the ability to enter text based on the chosen option from a drop-down menu

modify the inherent CSS property

"Incorporating date and time information into the database

Bug in ZURB Foundation Topbar causes incorrect highlighting of links on mobile when clicked