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

Implementing MVC3 Razor Stylesheet within a designated section

I am currently working with MVC3 using Razor. I have set up my website with a standard structure, including a small backend section. Within this backend area, I would like to create a folder specifically for storing "content" such as stylesheets and JavaSc ...

cssasp.net-mvc-3razor

Row within a table displaying link-like behavior

Here is the code I'm currently using: $('.table-striped tr').click( function() { var link = $(this).find('a').attr('href'); if(link != 'undefined') { window.location = link; } }).hover( func ...

javascripthtmlcsshyperlinkhtml-table

Substitute all instances of <table> with <div> tags, making sure to include specifications for

Currently, I find myself immersed in a project that relies heavily on tables, which isn't exactly ideal but is what the marketing department insists upon... To tackle this issue, I have implemented jQuery to convert all tables into DIVs, and so far, ...

javascripthtmlhtml-table

"Consolidating into one large package, Less is compiled and bundled together

Is there a way to display only the CSS being utilized on a webpage after it loads, rather than serving all compiled .less files as one big .css file? In addition, I am interested in having a sourcemap of the .less files shown in the browser for debugging ...

cssless

Exploring the process of passing parameters in Material-UI React styled components

Recently, I developed a new component const CategoryDialog = (props) => { const classes = useStyles(); console.log(props); return ( <div> <Dialog fullScreen open={props.dilaogOpenProp} TransitionCompone ...

javascriptcssreactjsmaterial-ui

Save the user input to a dedicated text file

I am working with a couple of select tags that generate an array. Previously, I was only logging the array to the console upon pressing the SUBMIT button, but now I want to save it to a separate text file. Here is my main.html code: <form method="POS ...

javascripthtml

List layout enhancement provided by Bootstrap

I'm facing an issue with the layout of a feature list content box. While it looks good on desktop, there are problems in smaller versions like tablet and mobile devices. The four words with icons are breaking and I believe this might not be the best s ...

htmlcssbootstrap-4

Enhance the styling of elements generated through JavaScript in VueJs with custom CSS

I need help applying CSS to elements that I dynamically created using JavaScript. buttonClicked(event) { console.log(event); let x = event.clientX - event.target.offsetLeft; let y = event.clientY - event.target.offsetTop; let ripples = document.cre ...

javascripthtmlcssvue.jsvuejs2

Is your href in javascript not functioning properly?

Recently, I completed the development of a mobile web application. Overall, everything seems to be working smoothly except for one issue: there is a link with JavaScript in its href that is causing problems. Strangely enough, this link works perfectly fi ...

javascripthtmlmobile

Div that scrolls independently without affecting the position of other elements

Visit this link for reference <div class="col-10 content" id="content"> <ul> <li>News</li> <li>News</li> <li>News</li> <li>News</li> < ...

htmlcssscroll

Can you provide me with instructions on how to change the background image?

Having trouble with the CSS code I wrote for a background-image. It's not showing up when I set it in my CSS stylesheet. I tested it and found that it only works when written in the body... <body background="Tokyo.png"> ...but not in the styl ...

csshtml

Ensure that the React Material UI Textfield with the type "number" is validated to have exactly 10 characters

<TextField variant="outlined" required fullWidth id="accno" label="Main Account Number" type="number" name="accno" //inputProps={{ className:"input-acc", pattern: "^.{0,10}$"}} autoComplete="accno" onChange={(e) = ...

javascripthtmlreactjsformsmaterial-ui

`Custom transitions between sections using fullpage.js`

Has anyone used the fullpage.js extension to achieve an animation similar to this one, where sections are destroyed on scroll? ...

javascriptcssvue.jswebglfullpage.js

The sign-up button mysteriously vanishes after the page is refreshed

I am encountering an issue with the sign up button during the user registration process. There is a checkbox for Terms & Conditions, and the button should only become enabled after checking this box. Everything seems to be functioning correctly, but when I ...

javascriptjqueryhtmlangularjs

Is there a way to prevent all attribute menu items within a ul/li List from being clicked when one of them has already been selected

When I quickly click on the Photos1, Photos2, Photos3, and Photos4 menus, the "$.get(..." is sent to the server four times. It's important that all of these menus are disabled after any one is clicked. My development environment includes NodeJS, Expre ...

jqueryhtmlnode.jsexpress

Creating a div with a scrollbar limited to a maximum of 100% of the page size

<!-- ********************************************************************************************************************************************************** RIGHT SIDEBAR CONTENT *********************************************************** ...

htmlcssscrollbar

Display line numbers in HTML/CSS cellsorIncor

Attempting to include row numbers in HTML/CSS. Below is the HTML code with React populating the rows: <table className="table table-striped"> <thead> <tr> {/*<th>ID</th>*/} ...

htmlcssreactjs

Navigating to different sections of a single page using Bootstrap

I'm feeling a bit lost when it comes to understanding how linking to an element within a page functions. As I delve into the starter template for Twitter Bootstrap, I encounter the following code snippet in the navbar: <ul class="nav navbar-nav"&g ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

The functionality of scrolling ceases to work once the bootstrap modal is closed

I am utilizing Bootstrap v3.1.1 to showcase a modal popup on one of my web pages. The following code shows how I have implemented it. <!--Start show add student popup here --> <div class="modal fade" id="add-student" tabindex="-1" role="dialog" a ...

javascriptjquerycssajaxtwitter-bootstrap

I'm keen on creating a marquee animation using Tailwind and Next.js

I'm working on creating a marquee animation using Tailwind CSS and Next.js, and I've made some progress. However, the issue I'm facing is that the items are not displaying one after the other smoothly; there seems to be a delay when the seco ...

cssnext.jstailwind-css