Tips for creating horizontal scrolling in the div element

I'm working with a div element that looks like this:

    <div id="tl"  style="float:right;width: 400px; height:100px; background-color:Green; overflow-x: scroll;overflow-y: hidden;">

        <div id='demo' style="float:left;height:90px;"> dsadsad </div>
        <div id='demo' style="float:left;height:90px;"> dsadsad </div>

    </div>

The content inside the div with the id 'demo' will be copied multiple times within the tl div. I am looking to achieve horizontal scrolling for the tl div.

Any suggestions on how I can make it work?

jqueryhtmlcss

Answer №1

If you're having trouble with your "demo" divs, try switching from float: left to display: inline-block; this adjustment should do the trick.

For more tips and suggestions, check out the Stack Overflow question "How to get Floating DIVs inside fixed-width DIV to continue horizontally?".

UPDATE: According to timhessel's comment below, Internet Explorer 6/7 may not support inline-block for div elements, so consider using span elements instead of divs for the "demo" sections since they are naturally inline.

Answer №2

Through my exploration and experimentation, I have come to the conclusion that achieving your desired layout may require an additional container with a fixed width. This is because floating elements adjust themselves based on the size of the container they are placed in.

The CSS:

    div.horizontal-wrapper {
        border: 1px solid gray;
        height: 100px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        width: 400px;
    }

    div.horizontal-wrapper div.content {
        float: left;
        display: inline;
        height: 100px;
        width: 500px;
    }

    div.horizontal-wrapper p {
        float: left;
        display: inline;
        height: 100px;
        width: 100px;
        text-align: center;
        position: relative;
    }

The HTML:

<div class="horizontal-wrapper">
    <div class="content">
        <p>Lorem</p
        <p>ipsum</p>
        <p>dolor</p>
        <p>sit</p>
        <p>amet</p>
    </div>
</div>

Check out the live demo to see it in action: http://example.com/horizontal-scroll-demo

For more insights, you can refer to a similar question discussed earlier on this topic: Topic Name - Horizontal Scrolling Element

Answer №3

In case you're utilizing jQuery, the approach I've taken to achieve what I believe you're looking for is the following:

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

Stop the __doPostBack function from executing

A grid control on my web page allows users to input values into the grid. When a new item is inserted, it generates a specific link: <a onclick="if(!$find('radGridHolidays_ctl00').insertItem()) return false;" id="radGridHolidays_ctl00_ctl02_ ...

jqueryasp.net

Enhance your user experience by implementing a jQuery solution that makes a div

Looking to add a small div on the right side of your screen that moves along with your vertical window slider? Wondering if jQuery has a function to get the current vertical slider position? I thought scrollTop() might work, but it only returns from a spe ...

jqueryhtmlcssjquery-ui

Connect an EventListener in JavaScript to update the currentTime of an HTML5 media element

*update I have made some changes to my code and it is now working. Here's the link: I am trying to pass a JavaScript variable to an HTML link... You can find my original question here: HTML5 video get currentTime not working with media events javscr ...

javascripthtmlvideoevent-listener

Having trouble passing JSON data from JQuery to ASP.Net MVC using AJAX calls?

When I try to call a WCF Service from my ASP.Net web application using jquery to test the service function GetData, I encounter an issue where the parameter value is null. It seems that I am unable to pass the data to the WCF service despite trying various ...

jqueryajaxwcfasp.net-ajax

Is it a mistake in the Jquery logic or a syntax error?

Is there a logic or syntax error causing one of the options when clicking the radio to not display the corresponding tables with the same number of option dates? <style> #ch2 ,#ch3 ,#ch4 ,#ch5 ,#ch6 ,#ch7 ,#ch8 ,#ch9 ,#ch10 ,#c ...

jqueryhtml

To reveal the secret map location, just tap on the button - but remember, this only applies to

I am encountering an issue with duplicating a card and toggling the hidden location map. Currently, the location button only works for the first card and not for the rest. I need each card to independently open and hide the location map when clicked on the ...

javascripthtmlcss

Automatically updating quantity with the power of jQuery

I have created a spreadsheet where users can input their expenses and the total will update automatically. Initially, I have set some default numbers in my HTML which are editable for users to modify as needed. However, I am facing an issue with my JQuer ...

javascripthtmljquery

Tips for keeping div and input tags selected even after a user clicks

I am working on a quiz script and I am trying to customize it so that when a user clicks on the div or input tags, they remain selected with a different background color. Currently, I have achieved changing the background color of the div when clicked, ...

htmlcssformsinputlabel

What is the best method for extracting individual JSON objects from a response object and presenting them in a table using Angular?

After receiving a JSON Array as a response Object from my Java application, I aim to extract each object and display it on the corresponding HTML page using TypeScript in Angular. list-user.component.ts import { HttpClient } from '@angular/common/h ...

javahtmlangulartypescriptjsonobjectrequest

Checking dynamically if a key-value pair exists in a JSON object

Here is some information that I have: "Vitals":[ { "Bp Systolic":"", "Bp Diastolic":"", "Weight":"", "Height":"", "BMI":"" } ], "Lab":[ { "Lipid_profile":[{ "Total Cholestrol":"", "TRIGLYCERID ...

jqueryjson

What is the process for uploading a file using jQuery?

I'm curious about how to achieve this using jQuery ajax. Currently, I have a jQuery ui dialog box that pops up with an html input file on it. When the user clicks import, I want to perform an ajax post to the server using jQuery. I am unsure of how ...

c#jqueryasp.net-mvc

Using HTML URL parameter in PHP code

Hi there, I'm new to using PHP and would appreciate any help you can provide. I'm facing an issue with passing a URL parameter from an HTML page (mywebsite.com/f.html?survey_id=5d86055f35bf41f3a35f2c779fc478dc) to a PHP script that should save t ...

phpjqueryhtmlajax.htaccess

Choose a specific inner div element within another div using jQuery

Trying to target a specific div within another div in my HTML structure. Here's how it looks: <div id="Stage_game_page1"><div id="cube0">[...]</div><div id="cube1">[...]</div></div> I am attempting to select #cube ...

javascriptjqueryfor-loopjquery-selectors

Creating a sidebar navigation in HTML and CSS to easily navigate to specific sections on a webpage

Here's a visual representation of my question I'm interested in creating a feature where scrolling will display dots indicating the current position on the page, allowing users to click on them to navigate to specific sections. How can I achieve ...

javascripthtmlcss

What prevents Django websites from being embedded within another HTML (iframe)?

I attempted to include a Django form within another HTML page, but it's not functioning correctly. I've tried on several of my other Django sites with no success. I even tested it on other websites as well. Is there a restriction on using Django ...

pythonhtmldjangoiframe

Steps to execute a JSON file once another JSON has been successfully loaded

I'm facing a similar challenge to the one presented in this question. However, I need to load an additional JSON file after the when() method is executed. Essentially, I want to retrieve JSON data within the when() function and then use that informati ...

javascriptjqueryjsonjsonpgetjson

Angular static dropdown option

<input [formControl]="twitterHandle" id="twitterHandle" placeholder="twitterHandle"> Fetching the input value from the Twitter handle input field using the following code: twitterHandle = new FormControl(); this.twitterHandle.value; Similarly, if ...

htmlangular

Utilizing the output from a console.log in a webpage

Although the function I created is functioning properly and successfully outputs the value to my terminal onSubmit, I am facing difficulty in understanding why this code isn't updating my html. router.post('/index', function(req, res, next) ...

javascriptjquerynode.jsexpress

Creating a JSON file using the attributes and values of HTML tags

I am seeking assistance in generating a JSON file from HTML data using jQuery. The HTML structure consists of multiple departments with similar tags and classes: <div class="department_one"> <h1>Name Of Manufacturer</h1> < ...

jqueryhtmlajaxjson

Exploring the power of Express.js by utilizing local variables and rendering dynamic views

I am in the final stages of completing an application using node.js and express, even though I am still relatively new to them. Here's my situation: In my app.js file, I have declared a variable app.locals.webLang and set its initial value to "EN". T ...

javascripthtmlnode.jsexpress