CODEWITHSUNDEEP
htmlcssscrollscrollbarlinear-gradients
InspectorDanno
InspectorDanno

Reputation: 995

How to get a div to scroll vertically and reveal gradient

I'm trying to get three divs side-by-side horizontally. I want the left-most div to scroll, so the gradient reveals itself as the user scrolls. For some reason the divs aren't adjacent and the left one isn't scrolling, and I don't know why.

* {margin: 0; padding: 0; box-sizing: border-box}
html, body {width: 100%; height: 100%}

.overall {
  height: 100%;
}

.scroll {
  width: 10%;
  height: 200%;
  background: linear-gradient(#e66465, #9198e5);
  overflow-y: scroll;
}

.one {
  width: 70%;
  height: 100%;
  background: lightgreen;
}

.two {
  width: 20%;
  height: 100%;
  background: lightblue;
}
<div class="overall">
  <div class="scroll"></div>
  <div class="one"></div>
  <div class="two"></div>
</div>

Upvotes: 1

Views: 358

Answers (1)

VXp
VXp

Reputation: 12068

They are not placed horizontally because div's are block-level elements by default, meaning they occupy the entire row / width of the screen.

Nowadays typically, if one needs to place them horizontally, he/she does it with the Flexbox or display: flex set on the parent element. Of course there are also other ways of doing it.

And for the scrolling, it doesn't scroll because there's nothing to scroll. Put some "tall" enough content (which is greater than the set height of 200%) inside the .scroll div and see it in "action":

* {margin: 0; padding: 0; box-sizing: border-box}
html, body {width: 100%; height: 100%}

.overall {
  display: flex; /* displays flex-items (children) inline by default */
  height: 100%;
}

.scroll {
  /*width: 10%;*/
  flex: 1; /* flexbox way of defining width */
  height: 200%; /* necessary ? */
  background: linear-gradient(#e66465, #9198e5);
  overflow-y: auto; /* modified, only shows the scrollbar when needed */
}

.one {
  /*width: 70%;*/
  flex: 7;
  /*height: 100%; not necessary, takes the parents height */
  background: lightgreen;
}

.two {
  /*width: 20%;*/
  flex: 2;
  /*height: 100%;*/
  background: lightblue;
}
<div class="overall">
  <div class="scroll">
    <p style="height: 250%">Some looooong paragraph which is taller that its parent...just for demo...</p>
  </div>
  <div class="one"></div>
  <div class="two"></div>
</div>

Upvotes: 2

Related Questions