CODEWITHSUNDEEP
htmlcss
stnee spc
stnee spc

Reputation: 59

How do I make elements scroll horizontally instead of vertically

How do I make these elements scroll horizontally instead of vertically. Right now the divs are scrolling vertically I want them to scroll horizontally I can't find the solution and I even set the height of the container.

.specials{
  padding: 9rem 0;
}
    
.specials__left{
  height: 516px;
  width: 60%;
  overflow-x: scroll;
  white-space: nowrap;
}
    
.specials__left-content{
  height: 100%;
  width: 60%;
  margin-right: 30px;
  display: inline-block;
  float: left;
  white-space: normal;
  background-color: yellow;
  margin-bottom: 40px;
}
<section class="specials">
                              
               <div class="specials__left">
                                          
                    <div class="specials__left-content"></div>
                    <div class="specials__left-content"></div>
                    <div class="specials__left-content"></div>
                    <div class="specials__left-content"></div>
                    <div class="specials__left-content"></div>
                    <div class="specials__left-content"></div>
                    <div class="specials__left-content"></div>
                                                                                   
               </div>
                                                         
        </section>

Upvotes: 1

Views: 2114

Answers (1)

Jack
Jack

Reputation: 1999

Try using this:

.grandparent {
  width: 200px;
  height: 125px;
  overflow-x: scroll;
  overflow-y: hidden;
}
    
.parent {
  height: 100px;
  white-space: nowrap;
}
    
.child {
  display: inline-block;
  height: 100px;
  width: 100px;
  margin-right: 30px;
  background-color: blue;
}
<div class="grandparent">       
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div

The grandparent element has a limited width (causing the scroll) but the parent element provides the support using white-space: nowrap; to keep it from collapsing. Does this help?

Upvotes: 1

Related Questions