CODEWITHSUNDEEP
htmlcssimagescroll
Akash R
Akash R

Reputation: 235

CSS Scroll Division Horizontally

.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 2 items in the topline and the next item goes to the next line instead of the same line. I want all 3 lines to be in the same line with horizontal scrolling. I thought that the float:left was affecting the scrolling but removing will lead to all 3 divisions being in separate lines

Upvotes: 1

Views: 227

Answers (3)

Selvio Perez
Selvio Perez

Reputation: 100

Try this:

<!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>

Upvotes: 0

yinsweet
yinsweet

Reputation: 2851

You just need to remove the float: left and add display: inline-block to your .item CSS.

.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; /* Change the display to inline-block for div */
  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>

Upvotes: 1

Soban
Soban

Reputation: 434

If you want all of them in one line with the scroll bar, try this:

.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>

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

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

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

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

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

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

Upvotes: 2

Related Questions