0
480
ViewsHow to put three div's in a parent div such that two are below stacked on top of each other on left and one is on the right? (Read description)
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:
·
Juan Pablo Isaza
1 answers
Answer question0
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
·
Juan Pablo Isaza
Report
Answer question