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

What is the best way to create a 6-column grid system without using bootstrap?

I am looking to create a row with 2 columns that should turn into 2 separate rows, each containing one column when viewed on smaller devices. I have researched CSS Grid but find it quite complex. Can someone simplify it for me? Thank you! ...

csslayoutgrid

Glitch in jQuery UI Tooltip

While using the jQuery UI tool for tooltips, an unusual bug has been noticed that cannot be replicated or resolved. Typically, this tool utilizes the title="whatever" portion of a tag to create a stylish CSS hover effect. However, it seems to also captur ...

jquerytooltipvisibilityjquery-tooltipjquery-ui-tooltip

What is the best approach for managing the popstate event when the URL no longer exists?

When working with html5 popstate, I have two specific goals in mind. Instead of relying on plugins, I am utilizing these two methods: Push State: function contentLoaded(...) { ... window.history.pushState({ pageUrl: url }, url, url); ... } Po ...

htmlpushstatepopstate

What is the best way to horizontally center a div on an extra small screen using Bootstrap?

I am looking to design a div layout with 4 columns, but I want the content centered when the screen is in xs mode. Below is the code snippet I have used: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" r ...

csstwitter-bootstrap

Transform your ordinary HTML select into a stylish span with this custom CSS class

I need help making a select element appear like a span under certain conditions. The CSS class I currently have works with input boxes, but not with dropdowns. Is there any advice on how to style the select element to look like a span without actually repl ...

jquerycssdrop-down-menuhtml

Creating personalized buttons with Bootstrap

I'm looking to create custom buttons using Bootstrap. The "Get Quote" button should have a magnifying glass symbol on its left, and the "Clear" button should have a symbol on its left as well, like shown in the image below. Additionally, I want to cha ...

htmlcssbootstrap-4

Concealing the footer on a webpage embedded within an iframe

<script> $(document).ready(function(){ $('.mydivclass').hide(); }); </script> Looking to embed Microsoft Forms in my HTML using an iframe. Can the footer of the Microsoft Forms be removed? ...

jqueryhtmliframecross-domain

When trying to apply styles using ng-style attribute with jQuery, Angular does not seem to

Check out this plunker showcasing the issue : http://plnkr.co/edit/1ceWH9o2WNVnUUoWE6Gm Take a look at the code : var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { console.log('yeah'); ...

javascriptjqueryangularjs

Encountering problems with parsing a lengthy JSON file

Can you spot the issue here? let stringinsta = JSON.parse({ "access_token":"129261**5ea59a4da481c65", "user":{ "username":"carlos_bellesso", ...

javascriptjqueryjson

Creating a CSV download feature with ReactJS is simple and incredibly useful. Enable users

Despite searching through various posts on this topic, I have yet to find a solution that addresses my specific issue. I've experimented with different libraries and combinations of them in an attempt to achieve the desired outcome, but so far, I have ...

javascripthtmlreactjscsvmaterial-ui

Tips for reconnecting tinymce to a textarea following an ajax refresh

Whenever I submit a form with a tinymce textarea, the containing div gets reloaded using the following code: $('body').on('submit', '.comment_form', function (e) { e.preventDefault(); tinyMCE.triggerSave(); ...

jqueryajaxtinymcereload

Activate a tooltip on the button depending on the value entered in the search field

I need to display a tooltip on the button when the search field is empty. Here is what I have attempted: // Enable hover feature const searchBtn = document.querySelector('.find__btn'); searchBtn.addEventListener('mouseover', () => ...

javascriptjquerycsstooltip

Running a function exclusively within a single div using Angular 2

I am currently using *ngFor to group items, and it's functioning correctly. However, I am having trouble displaying the "listofGroup" in the view even though it works in the console. Specifically, I need to run a function within a specific div in Angu ...

javascriptjqueryangular

Troublesome situation arising from CSS floats overlapping div elements

It's strange how this issue always occurs when using floats. This is what my div (samle) looks like: <div class="main> <div class="inn_div">&nbsp</div> </div> Here is my stylesheet: .main{ width:250px; border:1px ...

htmlcsscss-float

Executing an AJAX request on Rails 3 without triggering a redirect by using a link/button

What is the most effective method for executing an ajax command using a link in Rails 3.1 with jQuery? Currently, I am attempting to use a link to trigger code from the "update_me" controller action. The line in views/products/new.html.erb looks like this ...

ajaxruby-on-rails-3model-view-controllerjquery

How can I delete the onmouseover function in HTML?

Is there a way to remove the (onmouseover="mouseoversound.playclip()") function from the following HTML code? <a href="roster.html" onmouseover="mouseoversound.playclip()">Roster</a> Can we instead implement this functionality in a JavaScript ...

javascriptjqueryhtml

"Implementing real-time updates for checkboxes using AJAX with PHP and

This is my modal <div class="modal fade bs-example-modal-lg" id="exampleModal<?php echo $row['t_id'] ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel<?php echo $row['t_id'] ?>"> <div class="mo ...

phpjquerymysqlajax

Tips for using a button to update data without triggering a postback

Within the GridView in my ASP.net project, I have an ASP.net button with the following code: <asp:Button UseSubmitBehavior="false" runat="server" ID="btnShow" CssClass="btnSearch" Text="View All" CommandName="ViewAll" OnCommand="btnShow_Command" Comman ...

c#javascriptjqueryhtmlasp.net

"Utilizing the jQuery append method to dynamically insert an SVG element

Currently, I'm in the process of constructing a graph by utilizing svg elements and then dynamically creating rect elements for each bar in the graph through a loop. I have a query regarding how I can effectively pass the value of the "moveBar" varia ...

javascriptjquerysvgattributesappend

Troubleshooting: WordPress post not uploading to custom PHP file - Issue causing ERROR 500

Our website is built using WordPress, and I was tasked with adding a function to our newsletter subscription that sends an email to a specific address based on the selected value in the form. Everything was working perfectly on my local host, but when I tr ...

javascriptjqueryhtmlajaxwordpress