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

Activate a click on a div element to enable smooth scrolling when using the page down and page up keys

Generate a text input field within a dropdown menu

I'm curious as to why these two divs are positioned side by side. Can anyone shed some light on why this footer isn't functioning properly

Issue with interactive rows in a table ( Rails Version 4 )

Setting up automatic CSS linting in a Vue.js project for seamless correction

Circular Graphical Representation using CSS3 styling

Importing ReactDOM alone does not result in the rendering of anything

Material-UI Date Selectors: Show the Date in (Month, Day, Year) Format -> (April 17, 2019)

Leveraging the browser's built-in validation error messages in Angular for HTML forms

How to Retrieve Data from an HTML Table using the Laravel Framework

Having difficulties with my online form

Creating two horizontal flex containers with an input box that is responsive can be achieved by setting the display property

passing a PHP variable into an HTML input field

Trouble with HTML Contact Page Email Delivery

Troubleshooting my Xpath query for HTML - where did I make a mistake?

Tips for ensuring that the click event function properly for numerous elements sharing the same class

CSS selectors can be used to alter the styling of the container surrounding the text

Customizing padding and margin in material-UI styles

Tips for Eliminating Unnecessary Space Above the Navigation Bar

Creating a blog "post" model in Ruby on Rails with CSS that can behave in two distinct ways