Tips for creating a left-floating element with a horizontal scrolling area

I am trying to make this outer <div> scroll only in the x-axis, but it doesn't seem to be working properly.

.wrapper {
  width: 98%;
  height: 320px;
  padding-left:1%;
  padding-right:1%;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
  float:left;
  position:absolute;
}

.internal {
  width:250px;
  height:320px;
  display: inline;
  background-color: wheat;
  float:left;
  position:static;
}
<div class="wrapper">
    <div class="internal">item 1</div>
    <div class="internal">item 2</div>
    <div class="internal">item 3</div>
    <div class="internal">item 4</div>
    <div class="internal">item 5</div>
    <div class="internal">item 6</div>
    <div class="internal">item 7</div>
</div>

When I view it on my screen, it appears as:

What could be causing the issue?

htmlcss

Answer №1

It appears that your code could use some organization. There are multiple conflicting rules within the same selector.

To improve clarity, consider wrapping your items in an inner container with larger dimensions than the outer wrapper. Here is a cleaned-up version of your code:

http://jsfiddle.net/aLysdueo/

HTML:

<div class="wrapper">
    <div class="container">
        <div class="internal">item 1</div>
        <div class="internal">item 2</div>
        <div class="internal">item 3</div>
        <div class="internal">item 4</div>
        <div class="internal">item 5</div>
        <div class="internal">item 6</div>
        <div class="internal">item 7</div>
    </div>
</div>

CSS:

.wrapper {
    width: 98%;
    height: 320px;
    overflow-y: hidden;
    overflow-x: scroll;
}
.container {
    width: 1500px;
    height: 320px;
}

.internal {
    float:left;
    width:250px;
    height:320px;
    background-color: wheat;
}

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

Setting up multiple classes in my unique situation

Setting up an ng-class in my app My current setup looks like this: $scope.myClass = 'class-A'; Performing a task here... $scope.myClass ='class-B'; Performing another task here $scope.myClass ='class-C'; html <div n ...

htmlcssangularjsng-class

What is causing this unexpected text to display in Django when encountering errors while trying to submit a form?

On my website, there is a form that collects an employee number and validates it against another model called Salesman. It also checks if the employee's team field includes 'WF'. The validation process functions correctly and displays everyt ...

pythonhtmldjangodjango-forms

Position the list-group to the right using a float

I am new to Bootstrap and I'm facing a challenge with arranging my list items. I have 15 items in total, and I want the last 7 items to be aligned on the right side (see the image for reference). Despite trying out various tutorials, I haven't be ...

csshtmlbootstrap-4

Adjusting the front size while utilizing the SideNav feature in Materialize

While creating a website using Symfony and Materialize, my client requested to have the menu displayed on the side. I followed the guidelines from and successfully implemented the side menu on the left. However, I am encountering two issues: The first ...

javascriptcssmaterialize

The HTML required attribute seems to be ineffective when using AJAX for form submission

Having trouble with HTML required attribute when using AJAX submission I have set the input field in a model Form to require attribute, but it doesn't seem to work with ajax. <div class="modal fade hide" id="ajax-book-model" a ...

javascripthtmlajaxlaravel

What could be causing the unordered list in my CSS to not have proper spacing with padding?

Struggling with spacing out links on my class website. Here's the code I have: body { background-color: #eee; } nav { width: 100%; height: 100px; background-color: #fff; } ul { padding: 0; margin: 0; } ul li { list-style: none; d ...

htmlcssbrackets

Displaying XML data in an HTML table

Encountered a challenge while fetching data from an external XML document using JS. Following the w3schools tutorial for AJAX XML, but faced an issue I couldn't resolve. The XML structure is as follows: <root> <document-id> <author ...

javascripthtmljqueryajaxxml

Issue with scrollspy causing navigation items to not highlight correctly

If you want to track my progress, you can view it here - . Although clicking on the links in the navigation bar scrolls the page to the correct location, the link itself is not being highlighted. To address this, I had to incorporate an offset. var offset ...

jquerycsstwitter-bootstrapscrollspy

The crash during compilation is triggered by the presence of react-table/react-table.css in the code

My code and tests are functioning properly, but I am facing a challenge with my react-table file. The react-table.js API specifies that in order to use their CSS file, I need to include import "react-table/react-table.css"; in my react-table.js file. Howev ...

javascriptcssreactjsjestjsreact-table

Prevent the occurrence of a page break in between dt and dd elements

There are multiple instances of <dd> and <dt> elements in a specific order on this page. For instance: <dt> "Here is some random text" </dt> <dd> <input type="text"> <span></span> </dd> This str ...

htmlcss

Increase the size of a centered image within a table

Lately, I've felt like my mind is starting to unravel. Here's the issue at hand: I've been attempting to resize an image within a table cell so that it spans the full width of the cell. Strangely enough, this seems to be harder than anticip ...

javascriptjqueryhtmlcss

Modifying inline styles in React is as easy as placing the number within a div tag

I'm currently working on a React table component that consists of rows and columns. My main goal is to have the rows arranged vertically and the numbers within each row aligned horizontally. Here's how it looks at the moment: https://i.sstatic. ...

javascripthtmlcssreactjs

The ngOnChanges lifecycle hook is not being triggered

I've been working on a small project that involves two components: menu and bill. I'm trying to figure out how to make it so that when the quantity of any menu item is changed, the onChanges function in the bill component is called. I also need t ...

javascripthtmlangular

Need help with JQuery mouseOver fading in twice when you only want it to fade in

The version can be displayed here. I'm looking to have the current text fade away and the new text fade in. Strangely, it seems to fade in twice for some reason. $(window).load(function(){ var originalTitle = $('.Pinctitle').text(); $(&apo ...

jqueryhtmlcss

Updating an SVG after dynamically adding a group with javascript: a step-by-step guide

Currently, I am working on a circuit builder project using SVG for the components. In my HTML structure, I have an empty SVG tag that is scaled to full width and height. When I drag components from the toolbar into the canvas (screen), my JavaScript functi ...

javascripthtmlsvgdomxhtml

Modify the color of the text for the initial letter appearing in the sentence

I am currently exploring the possibility of altering the font color of the initial instance of a letter in a div. For example, if the String were 'The text' and I desired to make the color of 'e' yellow, then only the first e would be i ...

htmlcssangularjs

Push the accordion tab upwards towards the top of the browser

I am working on an accordion menu that contains lengthy content. To improve user experience, I want to implement a slide effect when the accordion content is opened. Currently, when the first two menu items are opened, the content of the last item is disp ...

javascriptjquerycssaccordion

WordPress having trouble rendering the stylesheet code

I am facing an issue with Wordpress where my CSS file is not loading properly. The stylesheet contains a rule to center the header image, but for some reason it's not working. I've also tried adding a margin-left of 100px, but that doesn't s ...

csswordpress

Customizing the backdrop photo on a jade-themed template

I'm running a node js application (without express) and encountering an issue with the background image url in my .jade file. extends ../node_modules/pug-bootstrap/_bootstrap block body style include style.css In my style.css file, I have the ...

cssnode.jspug

Having trouble retrieving the full png image using PhantomJs render command

Currently, I am utilizing PhantomJS to convert an html file into a png image. However, the html file is quite long horizontally and when using PhantomJs to render it as an image, it does not capture the entire length up to the last horizontal scroll. I a ...

javascripthtmlimagepngphantomjs