tips for scrolling divs horizontally within the main container

I've been attempting to scroll horizontally, but even though the scroll bar is visible, it's not functioning. Here's the code:

<!DOCTYPE html>
<html>
<head>
    <title>qwe</title>
</head>
<body>
<div style="width: 1000px; overflow-: scroll;">
    <div style="float: left;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
    <div style="float: left;">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
    <div style="float: left;">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
    <div style="float: left;">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div>
    <div style="float: left;">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</div>
    <div style="float: left;">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</div>
    <div style="float: left;">GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</div>
</div>
</body>
</html>

https://i.sstatic.net/0VRXw.png

csshorizontal-scrolling

Answer №1

Apply the style display: inline to the child elements instead of using float:left, and add white-space: nowrap to the parent element.

<html>
<div style="width: 300px; overflow: scroll; white-space: nowrap;">
    <div style="display: nline;">1111111111111111111111111111111</div>
    <div style="display: nline;">2222222222222222222222222222222</div>
    <div style="display: nline;">3333333333333333333333333333333</div>
    <div style="display: nline;">4444444444444444444444444444444</div>
    <div style="display: nline;">5555555555555555555555555555555</div>
    <div style="display: nline;">6666666666666666666666666666666</div>
    <div style="display: nline;">7777777777777777777777777777777</div>
</div>
</html>

Answer №2

Instead of using float:left and white-space: nowrap for the parent, you can apply display: inline to the child elements.

<body>
<div style="width: 300px; overflow: scroll; white-space: nowrap;">
    <div style="display: nline;">aaaaaaa</div>
    <div style="display: nline;">bbbbbbb</div>
    <div style="display: nline;">ccccccc</div>
    <div style="display: nline;">ddddddd</div>
    <div style="display: nline;">eeeeeee</div>
    <div style="display: nline;">fffffff</div>
    <div style="display: nline;">ggggggg</div>
</div>
</body>

Answer №3

Your div appears to be wider than necessary, eliminating the need for scroll indicators. Additionally, there is a minor error in your CSS property - it should be overflow, not overflow-.

If you still want to enable horizontal scrolling, consider reducing the width of the div like this:

<body>
<div style="width: 280px; overflow: scroll;">
    <div style="float: left;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
    <div style="float: left;">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
    <div style="float: left;">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
    <div style="float: left;">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div>
    <div style="float: left;">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</div>
    <div style="float: left;">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</div>
    <div style="float: left;">GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</div>
</div>
</body>

I hope this information proves helpful!

Answer №4

Simply adding a horizontal scrollbar won't make the content scrollable. I have provided a Codepen link that will help you achieve your desired scrolling effect.

codepen link

.container {  
  display: flex;
  border: 1px solid #ddd;
  max-width: 300px;
  min-height: 300px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: hidden;
  overflow-y: auto;
  transform: rotate(-90deg);
  position: relative;
}

.wrapper {
  display: flex;
  width: 300px;
  height: 300px;
  transform: rotate(90deg);
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

article {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  min-width: 100%;
}

Please check the link to see if it meets your requirements.

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

Is there a way to position the text to the right and the image to the left?

I have written the following code: <!DOCTYPE html> <html> <head> <title>UMass Boston Computer Science Club About page</title> <link href='https://fonts.googleapis.com/css?family=Chakra Petch' rel='sty ...

htmlcss

Can flexbox elements be animated as they scroll?

Wondering if it's feasible to animate flex elements upwards when scrolled? Attempting to replicate this effect: https://codepen.io/Sergiop79/pen/bxjGEe I want to apply this to the elements below (styled in flexbox), either the entire "row" or each i ...

javascriptcssflexboxcss-transitions

Styling with Chemistry: CSS for Chemical Formulas

Is there a way to write multiple formulas in CSS, or is there an alternative method I should consider? I want to integrate these formulas on my quiz website for students to use. I came across some intriguing examples that could be useful: However, I am s ...

phpcssformulaequations

Trouble with Bootstrap CSS buttons: color consistency problem persists

I am facing an issue with my Bootstrap button, which currently looks like this: https://i.sstatic.net/MWHYP.png The HTML code for the button in question is as follows: <button type="button" class="btn-primary.custom-btn" data-bs-to ...

htmlcsstwitter-bootstrapbootstrap-4

Using JQuery to iterate through every unique div id in the HTML document

i am attempting to utilize jquery to iterate through each div tag that has an id of "rate". The goal is for jquery to execute a function on the individual divs. Here is my code snippet: information.html <html> <input class="rate" type="hidden ...

javascriptphpjqueryhtmlcss

Move the absolute div by sliding it to the left from 120% to -10px

I want to move an absolute positioned div from the left side of the screen to -10px on button click. Here's my attempt so far, but it's not working as expected. Javascript/jQuery $('.button').click(function() { $(this).parent().f ...

javascriptjqueryhtmlcss

Aligning the 'container-fluid' slideshow and video player

I'm struggling to center a video in a slick slider that is set as a 'container-fluid'. The slideshow and video display fine across the full width of the browser, but when I resize the browser window or view the site on a lower resolution, I ...

javascriptjquerycsstwitter-bootstraphtml5-video

Unable to perform updates for personalized fonts

I've been trying to incorporate custom fonts into my website, but I seem to be facing difficulties in actually implementing them. Could someone please let me know if I am doing it correctly? .pattern{ background:rgba(0,0,0,.5) url(../images/pattern ...

javascripthtmlcssfonts

Tips for generating a new div for every iteration:

I am currently using asp.net with c# along with a Master Page. I have been attempting to create a new div for each loop in the while statement in order to customize the design as I desire. Is there a way to achieve this or is there an alternative method th ...

c#htmlcssasp.netloops

What is the best way to set the z-index for elements within CSS containers that are utilized for container queries?

I am thrilled about the introduction of container queries in CSS. It's great to see this feature now available across all browsers. However, I have encountered an issue when working with multiple consecutive containers and placing an absolutely positi ...

csscontainer-queries

Problematic response design

On my responsive website, I am utilizing the hr tag in various places. However, I have noticed that some lines appear with different thicknesses, as shown in the example below. For a demonstration, you can view a sample on this fiddle: http://fiddle.jshel ...

htmlcssresponsive-design

Sort the DOM elements in jQuery based on their CSS color property

Displayed on the page below is a list of usernames in a random order. I'm looking to sort them using jQuery in the following sequence: red blue green purple black This is my current progress: <script type="text/javascript"> $(function() { ...

jquerycsssortingcolors

Automatically log users out of Django and update the backend after a period of inactivity without requiring any additional requests

In my Django project, I am working on a simple multiplayer system where I need to update the isCurrentlyActive value in a user-related model automatically and then log them out. I tried using middleware following a solution from this post, which works well ...

javascripthtmlcssdjango

BorderWoocommerce

Something odd has appeared around my shopping cart total ("WARENKORB SUMME") today. Could you please take a look at the screenshot below? Any idea how to remove it? This is for a Wordpress/WooCommerce store. I haven't made any recent changes - I su ...

csswordpresswoocommerce

Encountered an issue retrieving two rows nested within a parent row using Bootstrap 4 and VueJs

Currently, I am working on a VueJs and Bootstrap4 component where my aim is to achieve a design similar to the one shown using the available bootstrap classes. After going through the documentation, I came across the customized classes h-75 and h-25 provi ...

htmlcssvue.jsbootstrap-4

Create a line with elements that end on the next line without taking up the full width

In a row of three links, I want the third one to be on the next line, but using .new-line { display:block; } makes the link 100% width on the next line, causing the entire area to be clickable. I also have content in the :before that should appear inline w ...

css

CSS: using syntax to target element by its unique identifier

Check out this guide: I followed the instructions and used an external stylesheet. I added #menu before each CSS item, for example: #menu ul{ font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none;} or: #menu ul li{ displ ...

css

How can I ensure that a div is positioned over another div with the same coordinates across all screen sizes?

[http://jsfiddle.net/w7r3gveg/]1 I am looking to position 4 Facebook logos in the center bottom of my background image. The background is represented by the 'bg' div, while the Facebook logo is in the 'facebook' div. Currently, I can ...

htmlcss

Display a video modal upon page load, allowing users the option to click a button to reopen the modal

Looking for a way to make a video modal automatically open on page load and allow users to reopen it by clicking a button? Here's a snippet of code that might help you achieve that: HTML <html> <head> <link rel="stylesheet ...

javascripthtmlcssbootstrap-4bootstrap-modal

CSS can be used to eliminate specific background images from a webpage

In the CSS code, I have specified two background images within a 'body' tag. #body { background: url("image1.jpeg"), url("image2.png"); background-repeat: no-repeat, no-repeat; } But now, I need to remove only "image1" from a specific p ...

css