What is the best method to enable horizontal scrolling within a div element by overflowing its content?

My layout looks like this:

<div id='container'>
  <div id='cont1' style='width:150px'>Content 1</div>
  <div id='cont2' style='width:150px'>Content 2</div>
  <div id='cont3' style='width:150px'>Content 3</div>
  <div id='cont4' style='width:150px'>Content 4</div>
  <div id='cont5' style='width:150px'>Content 5</div>
</div>

I want the div container to horizontally scroll. I need cont1 through cont5 to stay within container. I am looking for a way to horizontally scroll these 5 divs and arrange them next to each other as shown in the code.

I have been struggling to achieve this solution. For instance, consider the following structure:

<div id='container'>
  <div id='internalcontainer' style='width:750px'>
    <div id='cont1' style='width:150px'>Content 1</div>
    <div id='cont2' style='width:150px'>Content 2</div>
    <div id='cont3' style='width:150px'>Content 3</div>
    <div id='cont4' style='width:150px'>Content 4</div>
    <div id='cont5' style='width:150px'>Content 5</div>
  </div>
</div>

I found it challenging to implement horizontal scrolling by placing the divs next to each other (content divs). I attempted to place them within a fixed width container inside the div responsible for the horizontal scroll. Even with this setup, styling was difficult. My questions are:

  • Is it possible to achieve horizontal scrolling with the first structure?
  • Is it viable to achieve horizontal scrolling with the second structure?

I experimented extensively with CSS properties like overflow, but did not make progress...

Thank you!

csshtmlhorizontal-scrolling

Answer №1

If the event onmouseover is triggered, you can apply the style overflow-x:scroll to your container div. Then, reset it to overflow-x:hidden if onmouseout is triggered.

make changes

Here's what you should include in your container divs:

<div id='container' onmouseover='this.style["overflowX"]="scroll";'  onmouseout='this.style["overflowX"]="visible";'>
    ...
</div>

Give it a try yourself: http://jsfiddle.net/bukfixart/qX8Cx/

Answer №2

Achieving this layout is possible with both structures. I will focus on the first one as it is more concise and less verbose. To implement this, I will utilize the flex box CSS3 feature:

#container {
  display: inline-flex;
  flex-direction: row;
}
<div id='container'>
  <div id='cont1' style='width:150px'>Content 1</div>
  <div id='cont2' style='width:150px'>Content 2</div>
  <div id='cont3' style='width:150px'>Content 3</div>
  <div id='cont4' style='width:150px'>Content 4</div>
  <div id='cont5' style='width:150px'>Content 5</div>
</div>

If you wish to have a scroll bar within the container itself, you can include the following CSS:

#container {
  overflow-x: scroll;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to retrieve JSON data using jQuery

Currently, I have a PHP file that outputs JSON data like the following: {"news":[{"title":"title news example1","content":"blabla bla 1","img":"url"}, {"title":"title news example2","content":"blabla bla 2","img":"url2"}, {"title":"title news example3","c ...

jqueryhtmljson

Guide to changing the class of a particular child element when the parent element is clicked with vanilla JavaScript

Upon clicking the parent button, a class within its child element will toggle to show or hide. If the child element is selected, a loading animation will appear for a brief moment before reverting back to its original hidden state. I attempted to achieve ...

javascripthtmlcss

What is the process for adding information to the database when the checkbox is selected?

In my database, I have a table named "absent" that stores the ID of students and classes for absent students. Below is a table with student names, each accompanied by a checkbox. I am trying to insert into the absent table the IDs of students whose check ...

phphtmlmysqldatabasebackend

The error alert must be displayed directly beneath the specific box

When error messages occur in this code, they are displayed through an alert box. However, I would prefer to have the error message appear below the specific text box instead. This means that when I click on the submit button and a field is left empty, the ...

phpjavascripthtml

Create a cohesive user experience by implementing the same CSS animation when hovering over two distinct elements

For a learning exercise, I attempted to create an animation. My goal was to have the circle trigger an animation when hovered over, while also revealing the text in the .hide element. However, as soon as I hover over the circle and then move my mouse onto ...

htmlcss

Centering all td elements except for those with a specific class

Consider the following code snippets: <tr> <td class="foo">chuchu</td> <td>chuchu</td> <td>chuchu</td> <td>chuchu</td> <td>chuchu</td> </tr> Is there a way to center align thes ...

phphtmlcss

When I click on my div, the color does not change as expected

Recently, I wrote a code snippet where there are 9 different div elements each assigned a ".spaces" class. The intention was to change the color of these divs upon clicking on them. However, I encountered an issue where only the first div changes its color ...

javascripthtmldomdom-events

Is it acceptable to duplicate and replace content directly from the Google Inspector tool?

As I work on creating a new woocommerce checkout page, I encountered some issues. My approach to extracting code from woocommerce involved inspecting the Code and copying it directly into my checkout file at /woocommerce/checkout/checkout.php. Is this met ...

phpcsswordpresswoocommerce

Is there a way to achieve this design using bootstrap?

I am aiming to create a layout similar to this. My goal is to have a fixed sidebar on the left that measures 330px wide. Additionally, I want a gray box positioned at the center of the screen that adjusts its position based on changes in the content above ...

htmlcsstwitter-bootstraplayout

Guide on customizing webpack to incorporate SCSS in a React application

After creating my React app using create-react-app (with React ver. 16.6.3), I decided to incorporate SCSS into my components. To begin, I ran the eject script and made necessary adjustments in webpack.config.dev.js: { test: cssRegex, exclude: cssMo ...

cssreactjswebpacksass

Inject object into data attribute

I currently have data stored in a specific attribute like this: <div data-id=""> Within my markdown file, I also have a frontmatter variable like this: id: rick My goal is to pass that variable into the data-id attribute, which only accep ...

javascripthtmlvue.jsvuejs2

Instructions for utilizing float:left and list-style-type within HTML are as follows: I am currently experiencing issues with implementing the float:left and list-style-type properties in my code

I'm attempting to align a button list to the left using the float: left property and also remove list styles, but for some reason it's not working as expected. //CSS #tus{margin:5px;padding:0;width:640px;height:auto;} #tus ul{margin:0px;padding: ...

javascripthtmlcss

What are the implications of using subresource integrity with images and other types of media

Subresource integrity is a fantastic method for securely using third-party controlled HTTP-served resources. However, the specification currently only covers the HTMLLinkElement and HTMLScriptElement interfaces: NOTE A future iteration of this spec may i ...

htmlimagehttpsw3csubresource-integrity

Using checkboxes to select all in AngularJS

Recently, I started working with Angularjs and came across some legacy code. I am trying to figure out a way to select all checkboxes once the parent checkbox is selected. Here is the parent checkbox: <div class="form-group"> <label for="test ...

javascriptjqueryhtmlangularjscheckbox

The pop-up fails to appear

Could you assist me in identifying the issue with my code? <script type="text/javascript"> function PopupCenter(pageURL, title,w,h) { var left = (screen.width/2)-(w/2); var top = (screen.height/2)- ...

javascriptphphtml

CSS | Creating gaps between elements within a form

My form is currently inside a flexbox card with two sides - left and right. The left side displays a picture, while the right side contains the actual input fields. I'm looking to add more space between the different inputs as they feel too cramped at ...

htmlcssflexbox

Firebug displays the class name and location twice in the right panel

When examining a div labeled with .mlm-clearfix, I noticed that Firebug was displaying this class name and its URL twice in the right panel. The style declarations given for the Easy Clear Method in relation to this class are as follows: .mlm-clearfix:bef ...

htmlcssfirebug

Tips for effectively utilizing conditional comments

Is it possible to address all IE bugs by writing CSS in just one conditional block? <!--[if lt IE 9]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]--> If I use a single conditional comment for IE versions less th ...

htmlcssinternet-explorer

What causes <input> elements to vertically center when using the same technique for centering <span> elements? (The line-height of <input> does not match its parent's height)

Important: The height of <div> is set to 50px, and the line-height of <span> is also 50px When 'line-height' is not applied to the <span>, all elements align at the top of the parent. However, when 'line-height: 50px&apo ...

htmlcss

How to deactivate the <a> tag with Ant Design UI Library

Is there a method in the antd UI library to disable a link? The disabled attribute is not supported by the a tag according to MDN. This code snippet works in React but the link remains clickable when using Next.js. <Tooltip title={tooltip}> <a ...

javascripthtmlnext.jsantd