Scrolling CSS Divisions Along the Horizontal Axis

.group {
  background: #000;
  margin-left: 25px;
  margin-right: 25px;
  padding: 15px;
  width: inherit;
  white-space: nowrap;
  overflow-x: auto;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.item {
  margin: 3px;
  background-color: #ddd;
  float: left;
  padding: 20px;
  width: 200px;
  height: 300px;
}
<div class="group">

  <div class="item">
    <img src="someimage1.png" alt="..." style="height:150px;">
    <div>
      <h5>Some Text</h5>
      <p>Description</p>
    </div>
  </div>

  <div class="item">
    <img src="someimage2.png" alt="..." style="height:150px">
    <div>
      <h5>Some Text</h5>
      <p>Description</p>
    </div>
  </div>

  <div class="item">
    <img src="someimage3.png" alt="..." style="height:150px">
    <div>
      <h5>Some Text</h5>
      <p>Description</p>
    </div>
  </div>

</div>

There are three elements, but the layout is not as desired. The items are displayed on separate lines instead of one line with horizontal scrolling. It seems like the floating property is causing this issue. Removing the float:left may solve the problem, but it will also make each element appear on a different line.

htmlcssimagescroll

Answer №1

To display all items in a single line with a scroll bar, use the following code:

.group {
    background: #000;
    margin-left: 25px;
    margin-right: 25px;
    padding: 15px;
    width: inherit;
    white-space: nowrap;
    display: flex;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow-x: scroll;
    flex-wrap: nowrap;
}

.item {
    margin: 3px;
    background-color: #ddd;
    float: left;
    padding: 100px;
    width: 100%;
    height: 300px;
    display: flex;
}

<div class="group">
    <div class="item">
        <img src="https://robohash.org/200" alt="..." style="height: 150px;" />
        <div>
            <h5>Some Text</h5>
            <p>Description</p>
        </div>
    </div>

    (Repeat this block for each item you want to include)

</div>

Answer №2

To achieve the desired layout, simply take out the float: left and insert display: inline-block in the CSS for your .item.

.group {
  background: #000;
  margin-left: 25px;
  margin-right: 25px;
  padding: 15px;
  width: inherit;
  white-space: nowrap;
  overflow-x: auto;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.item {
  margin: 3px;
  background-color: #ddd;
  /* float: left; */
  display: inline-block; /* Update display property to inline-block for div alignment */
  padding: 20px;
  width: 200px;
  height: 300px;
}
<div class="group">

  <div class="item">
    <img src="someimage1.png" alt="..." style="height:150px;">
    <div>
      <h5>Some Text</h5>
      <p>Description</p>
    </div>
  </div>

  <div class="item">
    <img src="someimage2.png" alt="..." style="height:150px">
    <div>
      <h5>Some Text</h5>
      <p>Description</p>
    </div>
  </div>

  <div class="item">
    <img src="someimage3.png" alt="..." style="height:150px">
    <div>
      <h5>Some Text</h5>
      <p>Description</p>
    </div>
  </div>

</div>

Answer №3

Give this a shot:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .container {
      overflow-x: auto;
      background: #000;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }
    
    .group {
      margin-left: 25px;
      margin-right: 25px;
      padding: 15px;
      width: 600px;
      display: flex
    }
    
    .item {
      margin: 3px;
      background-color: #ddd;
      padding: 20px;
      width: 200px;
      height: 300px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="group">

      <div class="item">
        <img src="someimage1.png" alt="..." style="height:150px;">
        <div>
          <h5>Some Text</h5>
          <p>Description</p>
        </div>
      </div>

      <div class="item">
        <img src="someimage2.png" alt="..." style="height:150px">
        <div>
          <h5>Some Text</h5>
          <p>Description</p>
        </div>
      </div>

      <div class="item">
        <img src="someimage3.png" alt="..." style="height:150px">
        <div>
          <h5>Some Text</h5>
          <p>Description</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

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

The background image is not being properly applied by React's makeStyles

Even after attempting various methods to load the image for the backgroundImage property, it still does not appear on the page. Interestingly, loading external images (such as those from Google) works just fine. I experimented with the following: backgro ...

cssreactjstypescriptmaterial-uicreate-react-app

Unable to retrieve data from the database within PHP code

I have successfully built a shopping cart website utilizing SQL, HTML, and PHP. Below is the code snippet for the 'Add to Cart' button: <form method="post" action="cart.php" class="form-inline"> <input type="hidden" value="&apos ...

javascriptphphtmlcsssql

Is it possible to update the background image of my iframe video?

I'm looking to customize the play button on a video displayed through an iframe on my website. Here is the code snippet I've been working with: .ytp-cued-thumbnail-overlay-image { background: url(https://www.example.com/images/video-play-butt ...

htmlcss

Embedding a picture logo within a CSS-designed content box

I am trying to create a unique layout for my website that reveals content using labelled radio buttons, without the use of scripts. Instead of using <a href='#'>, I want to achieve a specific layout like the one shown in this example. When ...

htmlcsstabs

Refresh div content dynamically with anchor tag in place

I have a dilemma with the following div that contains an anchor tag linking to a php script responsible for updating information in a database and returning to this page. My goal is to execute this php script by clicking on the anchor tag, update the datab ...

javascriptphpjqueryhtmlajax

Is there a way to update the Angular component tag after it has been rendered?

Imagine we have a component in Angular with the selector "grid". @Component({ selector: 'grid', template: '<div>This is a grid.</div>', styleUrls: ['./grid.component.scss'] }) Now, when we include this gri ...

javascripthtmlangular

Exploring the capabilities of HTML5's file API along with Octokit.js to work with

I have been trying to create a form that allows users to upload binary data to GitHub using octokit.js. However, every time I attempt to do so, the data ends up corrupted on the GitHub side. Here is a minimal working example: http://jsfiddle.net/keddie/7r ...

javascripthtmlgitblobhtml5-filesystem

Is it possible for CSS div to have a height of 100% when placed within fluid parents

When the parent div's height is set to 100%, you can also set the child to 100% and it will function correctly. However, if the parent's height is determined by its content, the height attribute does not work as expected. Are there any effective ...

css

Manipulate container (div) to reveal and conceal

My jQuery was working fine until I added some more divs to my HTML. I'm now trying to toggle the opening and closing of a discussion container named discussionContainer with a click on the button replyButton. Any assistance would be highly appreciated ...

jqueryhtmlcssangularjs

What is the best way to set a checkbox to null instead of false using Angular?

I am currently developing a filtering system that allows users to select different parameters to filter through a list of items. For instance, the item list could be a collection of dishes with filters represented as checkboxes labeled as vegan, vegetaria ...

javascripthtmlangulartypescriptcheckbox

The controller is failing to effectively showcase the ng-show functionality

My webpage consists of three elements: a search bar, a search result area, and a form. The use case scenario involves showing the search bar and form div by default, while hiding the search result div. When I enter keywords into the search bar, client data ...

htmlcssangularjsionic-framework

Tips for adding a button to the SB Admin 2 Card header without altering its height

I am currently utilizing the SB Admin 2 template for my project and encountering difficulty when trying to add a button in the card header without altering the default height. The goal is to maintain a consistent look across both cards, as illustrated in t ...

htmlcssbootstrap-4

Is it possible to retrieve a variable from code.gs and pass it to my html file?

I had originally set up an automated email system to trigger once a certain condition was met, which I successfully implemented. However, I now want to enhance the email by including a more structured format and embedding an image from Google Drive. While ...

javascripthtmlgoogle-apps-scriptgoogle-sheetsgmail

What is the best way to adjust the maxHeight within AccordionDetails and enable scrolling functionality?

I am looking to display a large amount of data using the Accordion component from material-ui nested inside a Box element. However, I am unsure how to customize the default styles in order to set a specific maxHeight. Is there a way for me to take control ...

cssreactjsmaterial-ui

Scrolling through UL elements using Jquery

I am struggling to implement jQuery for scrolling a UL list, with two span elements for moving up and down. It works fine for a single li child, but how can it work for a dynamically filled ul? Any help would be greatly appreciated, as I am completely lo ...

javascriptjquerycss

"Preventing scrolling in Safari with CSS overflow:hidden isn't working as expected

Why does overflow: hidden on the body tag not disable scrolling on the page in Safari? It works in Chrome but not in Safari. I'm struggling to find a solution. Can anyone help? ...

cssreactjssafarioverflow

When a user clicks on an anchor tag, the corresponding value of the checked item is then returned

I have 3 sets of radio buttons. When a specific anchor with the "round" class is clicked, two actions should occur: The associated set of radio buttons needs to become visible The value of the checked input for that element should be returned. I am ...

javascripthtmlinputradio-button

Executing a webservice method in an html page using javascript without the need to refresh the page

Is it possible to call a webservice from an index.html page using JavaScript? My webservice is located at "localhost/ws/service.asmx" and the specific web method I want to call is called HelloWorld. The index.html page contains an HTML submit button whic ...

javascriptjqueryhtmlweb-services

Attempting to modify the background color of an iFrame in Internet Explorer

I am experiencing an issue with my webpage where the iFrame is displaying with a white background in IE, while it shows up with a blue background in Firefox and Chrome. I have attempted various solutions to make the background of the iframe blue or transpa ...

javascripthtmlcssinternet-exploreriframe

Are the results displayed in a vertical array format?

Being new to this world, I would greatly appreciate any assistance! I am working with Bootstrap checkboxes and trying to print them using jQuery's window.print function. However, the issue I am facing is that the array I create from the checkboxes d ...

javascripthtmljquerycssbootstrap-5