Overflowing multiple divs in CSS

Question

Overflowing multiple divs in CSS

I have a unique situation where I have 10 divs aligned in a row within one container located in the footer of a responsive website. The website is designed to be functional on smartphones as well.

My goal is to create a horizontal scrollview specifically for smartphones, with additional divs which overflow (divs 4, 5, 6, 7, 8, 9, and 10) placed outside the viewport. These overflow divs should slide into view when needed. Currently, using the CSS provided in this jsFiddle, the extra divs that don't fit in the row are displayed below the viewport rather than being aligned in the same row. How can I ensure all divs are in the same row?

In essence, I am aiming for only n squares to be visible within the viewport, while the remaining ones can be slid into view as necessary.

P.S. I am attempting to tackle this issue manually, but I'm curious if there are any jQuery scroll viewer plugins available (excluding jQuery Mobile).

jquery html css mobile

Answer 1

Answer №1

You may want to consider adding another enclosing div for this. Many sliders typically include a div with the CSS property overflow: hidden, containing a wide inner div (wide enough to accommodate all content) that shifts positions when the slider moves. In terms of plugins, I have experience using jQuery Tools on multiple occasions.

Answer 2

You may want to consider adding another enclosing div for this. Many sliders typically include a div with the CSS property overflow: hidden, containing a wide inner div (wide enough to accommodate all content) that shifts positions when the slider moves. In terms of plugins, I have experience using jQuery Tools on multiple occasions.

Answer 3

Answer №2

Is this the example you are looking for?

HTML

    <body>
        Content
        <div class="footer">
            <div class="footer_contents">
                    <div class="square selected">1</div>
                    <div class="square">2</div>
                    <div class="square">3</div>
                    <div class="square">4</div>
                    <div class="square">5</div>
                    <div class="square">6</div>
                    <div class="square">7</div>
                    <div class="square">8</div>
                    <div class="square">9</div>
                    <div class="square">10</div>
            </div>
        </div>
    </body>

CSS

.footer {
    height:50px; 
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: scroll;
    overflow-y: hidden;
}   

.footer_contents {
    height: 50px;
    width: 1000px;
    margin: auto;
}

Answer 4

Is this the example you are looking for?

HTML

    <body>
        Content
        <div class="footer">
            <div class="footer_contents">
                    <div class="square selected">1</div>
                    <div class="square">2</div>
                    <div class="square">3</div>
                    <div class="square">4</div>
                    <div class="square">5</div>
                    <div class="square">6</div>
                    <div class="square">7</div>
                    <div class="square">8</div>
                    <div class="square">9</div>
                    <div class="square">10</div>
            </div>
        </div>
    </body>

CSS

.footer {
    height:50px; 
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: scroll;
    overflow-y: hidden;
}   

.footer_contents {
    height: 50px;
    width: 1000px;
    margin: auto;
}

Overflowing multiple divs in CSS

Answer №1

Answer №2

Similar questions

Replace the submit button with an AJAX function to provide immediate feedback on user input

Could someone provide a detailed explanation on the functionality of multiple inline nth-child() in CSS?

Accessing the value of a hidden field within an ng-repeat loop when binding to an HTML table

Why is my AJAX request not working in conjunction with my on-page JavaScript?

An error in syntax is being triggered by the Php file being accessed through the <script src="list.php"></script>

I'm having trouble with the live sass compiler plugin in vs code - it's not syncing up with my css file properly

Cache Property: Unable to Retrieve Request in Current Context

It appears that jQuery is unable to identify a different string when making an Ajax call with a status code of 403

Having difficulty generating a footer for a page that includes a Material-UI Drawer component

Utilizing HTML form action to link to a PHP script located in a separate folder

Creating interactive button elements in daily views with FullCalendar and Vue3

Styling Your HTML Background with CSS and Enhancing it with JavaScript

Label embedded within field giving it a crispy touch

Trouble with ajax call in Internet Explorer 8

The term 'undefined' does not refer to an object

CSS background image not displaying in ReactJS with SCSS

Hosting completely disregards CSS class

Anticipated spatial glitch problem involving the gadicc/meteor-reactive-window package for Meteor

When the browser is resized, elements do not change position

Simple jQuery slider that applies the active class to the slider list item