Narrow block with horizontal scrollbar

I am looking to create a grid filled with numerous photos in a row. However, due to the limited width of the web page, I need to implement horizontal scrolling.

Check out my solution here: http://jsfiddle.net/49REZ/

HTML

<div class="wrapper">
    <div class="photos">
        <ul>
            <li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg"/></li>
            <li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg"/></li>
            <li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg"/></li>
            <li><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg"/></li>
        </ul>
    </div>
</div>

CSS

.wrapper {
    width: 80%;
    margin: 10px auto;
}

.wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
}

ul, li {
    margin: 0;
    padding: 0;
}

.wrapper ul {
    width: 10000px;
}

ul li {
    list-style: none;
    float: left;
}

While this setup works smoothly in Chrome, it encounters an issue in Firefox where the block extends too far beyond the photos, leaving excessive white space.

htmlcss

Answer №1

Consider updating the CSS with this code snippet:

.container ul {
    white-space: nowrap;
}

ul li {
    list-style: none;
    display: inline-block;
}

http://jsfiddle.net/49REZ/4/

Answer №2

If you're looking to display images in a horizontal scrollable list, you can use the following code:
HTML:

<ul class="image-gallery">
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
  <li><a href="#"><img src="http://photos-ak.sparkpeople.com/nw/4/4/l446472527.jpg" width="150" height="150"/></a></li>
</ul>

CSS:

 ul.image-gallery {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    width: 500px;
    overflow-x: auto;
    background-color: #ddd;
  }
  ul.image-gallery li {
    display: inline;
    width: 150px;
    height: 150px;
  }

Link to the example on jsfiddle

Answer №3

Consider positioning your 10,000px element within a different parent component, like a div or even directly in the body of the document.

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

Tips on inserting text into form input fields

I need some guidance on how to enhance my form input functionality. The form currently consists of an input box and a submit button. When the user clicks submit, the form content is submitted and processed using javascript. What I am aiming for is to autom ...

javascripthtml

What is the best class to implement in my jQuery code?

Currently in the process of developing a customized Google Chrome extension. Encountering an issue or experiencing confusion regarding the selection of a specific class to integrate into my jQuery script, particularly with numerous classes associated with ...

javascriptjqueryhtmlcss

Having trouble getting my <a> tags to function properly on my GitHub webpage, even though they work perfectly fine on Codepen

I recently completed a random quote generator webpage project as part of my freecodecamp curriculum. I decided to upload the files to GitHub in order to host them as standalone webpages. While the page works perfectly on CodePen, I encountered an issue wit ...

htmlgithubhyperlinktagscodepen

Pressing the dart key will alter the sprite's direction in a 2D game

Recently, I've been working on a Dart game where the user controls a space ship sprite using the W, A, S, and D keys. Pressing these keys will move the sprite up, left, right, and down respectively. Additionally, pressing the Space bar will launch a p ...

htmldartgame-development

Strategies for pinpointing suffixes in SCSS during hover effects

In my current nextJS project, I am incorporating SCSS and encountering an issue when attempting to target the child element on hover and focus: .accordion { max-width: 600px; margin: 4rem auto; width: 90%; font-family: "Raleway", sans-s ...

csssassnext.js

What could be the reason for the recurring presence of duplicate <a> tags in my

I've implemented the bootstrap "pager" feature from the pagination section. Here is how I'm using PHP to generate the HTML code for it: echo "<ul class='pager'>"; echo ($total > $lim) ? "<li class='previous'>" ...

phphtml

Bizarre discrepancies in text wrapping across various browsers

After encountering a larger issue, I found that I could reduce it to a simpler scenario: To see the problem in action, check out this jsFiddle link: http://jsfiddle.net/uUGp6/ Here is the simplified HTML code: <div class="box"> <img class=" ...

htmlcssword-wrap

I am facing difficulties with invoking the popOpen() function within my parameters in JS, HTML, and CSS

I'm currently facing an issue with my code. I am attempting to invoke my openPop() function with the input parameter 'pop' within some of my sensor code, but no pop-up is appearing even though I believe I am calling the popup correctly. If a ...

javascripthtmlcss

Showing the value of a JavaScript variable within an HTML input field

Here is an interesting HTML structure that includes a list and input field: <li> <span>19</span> </li> <li> <span>20</span> </li> ...

javascripthtmljquery

Tips for choosing the parent's parent and applying a width of 100%

I am currently facing some challenges while creating a simple navigation bar from scratch. I am struggling with setting specific widths, especially wanting .navbarDropBtn to align its width with .navbarMain. However, it seems to only match the width of the ...

htmlcss

What is the best way to make ng-style append to a pre-existing style?

I am facing an issue with my custom popover directive and another custom directive that uses it. I am attempting to use ng-style to adjust the width of the popover. Below is a code snippet from the directive's html template: <div my-custom-popover ...

htmlcssangularjsangularjs-directive

Cannot locate the index for removal of element in the array

Having trouble removing an element from an array when the animation ends? You may be encountering the error "index is not defined." Need help finding and correctly removing a specific index when the animation finishes? Check out the drop() and remove() me ...

javascripthtmlvue.jsvuejs2

The CSS opacity property fails to function properly on Google Chrome

While it is functioning correctly on Firefox, there seems to be an issue with Chrome. I am attempting to have a card apply the opacity property when hovered over. Here is the HTML file: <div class="col mb-4"> <a class="text ...

htmlcssgoogle-chromebootstrap-4

What are some strategies for creating a website that caters to both web crawlers and users of single page applications?

Let's get down to the specifics. I've got a frontend website at (don't worry, it's not porn). If you have javascript enabled, the URL becomes [this uses jquery/ajax load]. If you're without javascript, the URL remains as . To ...

javascripthtmlajaxsearch-enginesingle-page-application

triangular shape at the top and rounded shape at the bottom combined with various colors

Is there a way to create a triangle with a rounded bottom section in a different color? #box { content:""; width: 0; height: 0; border-style: solid; border-width: 0 150px 150px 150px; border-color: transparent yellow red blue; ...

css

Transforming RGBA, HSL, and HSLA color values into RGB format, or encapsulating them within a java.awt.Color instance

Seeking information on algorithms that can convert RGBA, HSL, and HSLA colors to RGB colors, or a Java library that performs this conversion and returns a java.awt.Color object. Any recommendations or assistance would be greatly appreciated! ...

javacssrgbrgbahsl

Steps for implementing a Toggle Navigation Bar in CSS

I'm looking to implement a show/hide navigation menu similar to the one showcased in this inspiration source: Code Snippet (HTML) <div id="menus"> <nav id="nav"> <ul> <li><a href="#">HOME</a></li> <li& ...

javascripthtmlcss

How to position two distinct elements within a Bootstrap 5 accordion button

I am currently working with Bootstrap 5 and facing a challenge in aligning a <p> tag and a <span> to the left and right, respectively. Despite trying various approaches, I am unable to achieve the desired outcome of having them move in opposite ...

htmlcssbootstrap-5

The issue of the drop-down menu not appearing persists when using HTML and CSS

ul#menu li ,ul.sub-menu li { list-style-type: none; float:left; } ul#menu li a ,ul.sub-menu li a { display: inline-block; width: 150px; height: 40px; text-decoration: none; line-height: 40px; text-align: center; color:rgb(235, 139, 13) ...

htmlcss

Store user input as cookies and showcase it to the user upon their return visit

I'm looking for some assistance in saving user input to cookies and displaying it to the user. The goal is to have the text entered in the input field change into a div and be displayed to the user every time they revisit the page. Currently, I only ...

javascriptjqueryhtmlcsscookies