-3

I have a parent div classed outer with three children named top-left, bottom-left and right.

The right one has height 100vh and width 80vw. The left ones have width 20vw and indefinite height. Also, the right one needs to be fixed in the place, so when the user scrolls, the left ones scroll while the right one remains where it is.

How do I make divs fall in their proper places?

Here's a rough image of what I want on my webpage:

Click for rough image of required webpage

Tarang Patil
  • 1
  • 1

1 Answers1

0

Use a grid layout:

.outer {
  display: grid;
  grid-template-areas: "tl r" "bl r";
  grid-template-columns: 20vw 1fr;
  grid-template-rows: 30vh 1fr;
  height: 100vh;
}

#top-left {
  grid-area: tl;
  background-color: red;
}

#bottom-left {
  grid-area: bl;
  background-color: green;
}

#right {
  grid-area: r;
  background-color: blue;
}
<div class="outer">
  <div id="top-left">Top Left</div>
  <div id="bottom-left">Bottom Left</div>
  <div id="right">Right</div>
</div>

A Complete Guide to Grid | CSS-Tricks - CSS-Tricks
CSS Grid Layout - CSS: Cascading Style Sheets | MDN

Richard Deeming
  • 28,664
  • 7
  • 72
  • 132
  • OG here! Solved the issue. put the right element in a container div, put it along with left elements in a grid, use grid elements to order them, the set the right element (inside container) to position:fixed; – Tarang Patil Jan 14 '22 at 08:59
  • A CSS Grid layout will be far simpler, and much more flexible. – Richard Deeming Jan 14 '22 at 09:04