Arranging nested Divs for horizontal scrolling purposes

I'm struggling to achieve horizontal scrolling only in my provided example link HERE. It seems like a simple fix should be adding 

{overflow-x:auto; and overflow-y:hidden;}
in the CSS, but I've tried that and it's not giving me the desired result. I want the content to scroll horizontally when more features and links are added to the HTML file without dropping down like it currently does in the jsfiddle. Here is a snippet of my code:

CSS:

body {
  font-family: "marcellus sc";
}

// Rest of CSS code here...

HTML:

<div class="links_wrapper">
  // HTML code here...
</div>

I prefer to solve this issue using CSS rather than relying on JavaScript as a last resort. Can anyone point out what I might be doing wrong or missing? Your help is greatly appreciated. Thank you!

htmlcss

Answer №1

This example demonstrates the simplest case of achieving the desired effect. It features a single div with horizontally laid out children that scroll along the x-axis.

The key technique used is setting white-space:nowrap; on the scrolling div, while ensuring that white-space:normal; is applied to its children so that text wraps correctly.

Here is a link to a Fiddle showcasing this concept: http://jsfiddle.net/n67Gk/

HTML:

<div class="scroll">
    <a href="#">
        This scrolls
    </a>
    <a href="#">
        This scrolls
    </a>
    <a href="#">
        This scrolls
    </a>
    <a href="#">
        This scrolls
    </a>
    <a href="#">
        This scrolls
    </a>
    <a href="#">
        This scrolls
    </a>   
    <a href="#">
        This scrolls
    </a>
    <a href="#">
        This scrolls
    </a>   

</div>

CSS:

body{
    margin:0;
}
body, html{
    width:100%;
    height:100%;
}

.scroll{
    width:100%;
    height:398px;
    overflow-x:auto;
    white-space:nowrap;
}

.scroll a{
    display:inline-block;
    vertical-align:top;
    height:100%;
    width:100px;
    background:#369;
    border-radius:5px;
}

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

What is the proper method for integrating the next.js Image component with the HTML <picture> element?

When it comes to optimizing images, Next.js offers an Image component that lazy loads images and includes a srcset for a particular image. However, there are instances where we need to serve different images based on the device being used (art redirection ...

htmlimagenext.js

Integrating dynamic transition effects using Jquery Mobile for <div> elements

Just a friendly reminder, I must admit that my knowledge of Javascript is quite limited. I received a script from Padilicious to implement swipe navigation on my Jquery Mobile Site. It involves adding functions to a div tag like this: <div data-ro ...

javascripthtmlcssanimationjquery-mobile

Saving the subtracted value from a span into a cookie until the checkbox is unchecked - here's how to

I am working on a piece of code that includes numeric values within a span. When the checkbox is clicked, it subtracts 1 from the main value, essentially reducing the total value. How can I achieve this so that even after the form is submitted, the deducte ...

javascriptphpjqueryhtml

Exploring Grails Assets, Redirections, Secure Sockets Layer, and Chrome

Using Grails 2.1.1 with the resources plugin, I have encountered an issue when incorporating the jstree library which comes with themes configuration: "themes":{ "theme":"default", "dots":false, "icons":true } The JavaScript in the library locat ...

javascriptcssgrailsjstree

How to position one div next to another using CSS and HTML

Hey there, I'm facing an issue with creating a sidenav next to a div containing paragraphs and images. I can't seem to make both the sidenav and the other div appear inline. If anyone has any insights on how to solve this problem or spot what I&a ...

htmlcss

Tips for styling links in Nuxt/Vue based on specific conditions

Struggling with conditional styling in my Nuxt app. I want to change the background color of the active link based on the current page. Using .nuxt-link-exact-active works for styling the active link, but how can I customize it for each page? The links ar ...

htmlcssvue.jsnuxt.js

Apply the CSS style specifically to the initial row in the table

Is there a way to target the first row of a table with a different tr class using CSS? <div id="right"> <table> <tbody> <tr class="head"> <td >Date</td><td>Info</td><td>More</td> </tr> ...

htmlcss

Unlocking the potential of Vue within shadow dom environments

I am facing an issue with a shadow DOM that includes the root element and a Vue component. <template> <div class="container"> <div id="app"></div> </div> <script src="http://my-site.com/app/js/vue-compo ...

javascripthtmlvue.js

CSS Flexbox: Achieving Perfect Alignment for a Responsive Hamburger Navbar

This is a specific inquiry that requires your attention To begin, kindly execute the code in fullscreen mode Inspect the code and adjust it to fit within a mobile width (there seems to be an issue with responsiveness) Next, open the hamburger menu As show ...

htmlcssflexbox

Error Encountered: Bootstrap Dropdown Menu Malfunction in Master Page

I'm struggling to make my Bootstrap drop down menu function properly. Nothing happens when I click on the link, no dropdown appears. I've set up my nav bar in a master page and have spent hours trying to troubleshoot it without success... This i ...

asp.netcsstwitter-bootstrap-3

CSS3 Animation displaying text color change on various elements in a continuous loop

I was attempting to create a dynamic animation where multiple texts change color, similar to what you can see on https://vercel.com. I have successfully figured out how to make one text change color using keyframes, but I am struggling to make each text ch ...

htmlcssreactjs

Utilize duplicate named CSS grid rows as a reference

Summary; This method currently works, but it requires adding multiple nth-child selectors for each new person and their answer. I am seeking a solution that can dynamically handle any number of rows using an even and odd selector to simplify the process. ...

htmlcsscss-grid

How can validation of input fields be implemented in React Js?

Currently, I am dealing with a variable (in my actual application it is an API) named data, which contains nested items. Starting from the first level, it includes a title that is already displayed and then an array called sublevel, which comprises multip ...

javascripthtmlreactjsformsvalidation

Tips for incorporating jQuery val() into a span element!

I am currently working on a plugin that involves interacting with select elements grouped within a span. I want to enhance the functionality of my plugin by adding support for the val() function, which will allow users to easily get or set the 'value& ...

javascriptjquerydomjquery-pluginshtml

Is there a way in JavaScript or jQuery to display text from an array and switch to the next piece of text in the array with the click of a button?

I currently have an array containing 13 items, all of which are text. To display the text from the array, I am using: document.write(arrayname["0"]); However, I would like to implement a functionality where users can click a button to fade out the curren ...

javascriptjqueryhtml

Expanding the blank area on the right margin of the page

Recently, I took a responsive website template and converted it into an ASP.NET MVC app. However, I've encountered some peculiar behavior when resizing the browser window. As the width of the window decreases below 986 pixels, a mysterious white "spac ...

htmlcssresponsive-design

Ensure tables are vertically centered when printing an HTML page

I need to export two tables, each measuring 7cm×15cm, to a PDF file with A4 portrait paper size using the browser's "Save to PDF" option in the print tool. My goal is to center these two tables vertically on the A4 paper. If that proves difficult, I ...

htmlcssprinting

Unable to display the absolute path of the image src in WebStorm

Hey there! I recently started learning HTML5 and have been using WebStorm on my trusty Macbook Air for about two weeks now. I've encountered a problem with image sourcing that has left me puzzled. Here's my question: Why is it that images from ...

csshtmlimagewebstormsrc

What are some effective methods for testing web applications on mobile devices?

While I may not have the funds to purchase mobile phones and iPhones, I am eager to ensure my web applications can be accessed on mobile devices. Are there any software solutions available to simulate these devices, or what steps should I take? ...

htmlcssmobile

Calculate the dimensions of each list item and dynamically increase the size of the unordered list with jQuery

Trying to extract the 'width' style attribute from li and assign it to ul. The HTML code looks like this: <div id="carousel_team" class="glide"> <ul class="slides" style="opacity: 1; width: 1464px;"> <li class="slide first active ...

jqueryhtml