IntersectionObserver not working properly while trying with translationX

IntersectionObserver not working properly while trying with translationX - html

I am trying to work with intersectionObserver but it is acting wierd while trying with translationX. I wanted to translate all the .feature class form right to left as I scroll down but for some reason it is pushing contents outside of the viewport and it goes back to normal after all the items are visible.
Edit:
The above problem is occuring When i refresh page while viewing .feature class and it shows directly after refresh.
Found a solution:
Due to overflow hidden my documet was being scroll lock before the tranlation at the right side. Using animation soved my problem. :)
When I try to translate from left to right by changing
.feature{
opacity: 0;
transition: opacity 200ms ease-in,
transform 200ms ease-in;
transform: translateX(400px);
}
to
.feature{
opacity: 0;
transition: opacity 200ms ease-in,
transform 200ms ease-in;
transform: translateX(-400px);
}
it is working properly.
here is my codes.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll effect</title>
<link rel="stylesheet" href="style.css">
<script src="mian.js" defer></script>
</head>
<body>
<div class="space"></div>
<div class="grid features">
<div class="feature"><p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut deleniti aliquid obcaecati hic laudantium molestiae ea beatae maxime explicabo velit commodi, mollitia ratione corporis itaque suscipit sint eaque iure, ab doloribus quibusdam? Itaque beatae eaque nesciunt! Saepe mollitia veritatis accusamus aspernatur itaque modi alias dolores corrupti omnis odit, vero iusto repudiandae. Deleniti vel adipisci eveniet reiciendis natus? Quia iure sint debitis veritatis illo optio repellat? Blanditiis dicta atque quam possimus asperiores laudantium! Nulla modi facilis quas provident eaque hic cum obcaecati distinctio, qui soluta illo ratione expedita nihil. Distinctio voluptate qui autem. Debitis aliquid porro cupiditate accusantium, sunt quibusdam animi!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis iusto totam labore cum laborum rem amet, impedit eveniet dolorum quaerat natus magnam sed quidem ipsum suscipit velit? Corrupti eligendi cumque aliquam a tenetur, cupiditate, sint illo ut explicabo ex exercitationem reiciendis. Sapiente nostrum est voluptatum. At distinctio voluptate laboriosam? Quos voluptas blanditiis magnam quaerat sit cumque placeat possimus iure accusamus ex laudantium quasi unde, laboriosam similique ullam iste magni distinctio quis veniam eius. Magni aliquid ipsum eligendi odit cupiditate deserunt in libero laudantium, beatae hic nemo natus culpa dolore quas impedit exercitationem atque rerum! A est hic temporibus minus laborum!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus est earum sit quam aliquid ratione eaque nihil magni exercitationem veritatis nemo ex, ipsum et deserunt fugit porro commodi magnam quibusdam omnis molestias tempora! Deserunt laborum rerum debitis obcaecati officia sed autem quae temporibus repellendus! Nam deleniti debitis placeat laudantium illum cupiditate repellendus, quis laboriosam distinctio repudiandae. Quibusdam deleniti inventore perspiciatis aspernatur? Officia illum neque, eos distinctio repellendus quod odio hic labore unde necessitatibus voluptates doloribus. Ea in aliquam dolorem iure. Voluptatem dolores dicta iste sed eos a exercitationem molestias ipsa, quod natus similique corrupti ipsam fuga id cupiditate reprehenderit pariatur?</p></div>
</div>
<div class="grid features">
<div class="feature"><p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut deleniti aliquid obcaecati hic laudantium molestiae ea beatae maxime explicabo velit commodi, mollitia ratione corporis itaque suscipit sint eaque iure, ab doloribus quibusdam? Itaque beatae eaque nesciunt! Saepe mollitia veritatis accusamus aspernatur itaque modi alias dolores corrupti omnis odit, vero iusto repudiandae. Deleniti vel adipisci eveniet reiciendis natus? Quia iure sint debitis veritatis illo optio repellat? Blanditiis dicta atque quam possimus asperiores laudantium! Nulla modi facilis quas provident eaque hic cum obcaecati distinctio, qui soluta illo ratione expedita nihil. Distinctio voluptate qui autem. Debitis aliquid porro cupiditate accusantium, sunt quibusdam animi!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis iusto totam labore cum laborum rem amet, impedit eveniet dolorum quaerat natus magnam sed quidem ipsum suscipit velit? Corrupti eligendi cumque aliquam a tenetur, cupiditate, sint illo ut explicabo ex exercitationem reiciendis. Sapiente nostrum est voluptatum. At distinctio voluptate laboriosam? Quos voluptas blanditiis magnam quaerat sit cumque placeat possimus iure accusamus ex laudantium quasi unde, laboriosam similique ullam iste magni distinctio quis veniam eius. Magni aliquid ipsum eligendi odit cupiditate deserunt in libero laudantium, beatae hic nemo natus culpa dolore quas impedit exercitationem atque rerum! A est hic temporibus minus laborum!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus est earum sit quam aliquid ratione eaque nihil magni exercitationem veritatis nemo ex, ipsum et deserunt fugit porro commodi magnam quibusdam omnis molestias tempora! Deserunt laborum rerum debitis obcaecati officia sed autem quae temporibus repellendus! Nam deleniti debitis placeat laudantium illum cupiditate repellendus, quis laboriosam distinctio repudiandae. Quibusdam deleniti inventore perspiciatis aspernatur? Officia illum neque, eos distinctio repellendus quod odio hic labore unde necessitatibus voluptates doloribus. Ea in aliquam dolorem iure. Voluptatem dolores dicta iste sed eos a exercitationem molestias ipsa, quod natus similique corrupti ipsam fuga id cupiditate reprehenderit pariatur?</p></div>
</div>
<div class="grid features">
<div class="feature"><p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut deleniti aliquid obcaecati hic laudantium molestiae ea beatae maxime explicabo velit commodi, mollitia ratione corporis itaque suscipit sint eaque iure, ab doloribus quibusdam? Itaque beatae eaque nesciunt! Saepe mollitia veritatis accusamus aspernatur itaque modi alias dolores corrupti omnis odit, vero iusto repudiandae. Deleniti vel adipisci eveniet reiciendis natus? Quia iure sint debitis veritatis illo optio repellat? Blanditiis dicta atque quam possimus asperiores laudantium! Nulla modi facilis quas provident eaque hic cum obcaecati distinctio, qui soluta illo ratione expedita nihil. Distinctio voluptate qui autem. Debitis aliquid porro cupiditate accusantium, sunt quibusdam animi!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis iusto totam labore cum laborum rem amet, impedit eveniet dolorum quaerat natus magnam sed quidem ipsum suscipit velit? Corrupti eligendi cumque aliquam a tenetur, cupiditate, sint illo ut explicabo ex exercitationem reiciendis. Sapiente nostrum est voluptatum. At distinctio voluptate laboriosam? Quos voluptas blanditiis magnam quaerat sit cumque placeat possimus iure accusamus ex laudantium quasi unde, laboriosam similique ullam iste magni distinctio quis veniam eius. Magni aliquid ipsum eligendi odit cupiditate deserunt in libero laudantium, beatae hic nemo natus culpa dolore quas impedit exercitationem atque rerum! A est hic temporibus minus laborum!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus est earum sit quam aliquid ratione eaque nihil magni exercitationem veritatis nemo ex, ipsum et deserunt fugit porro commodi magnam quibusdam omnis molestias tempora! Deserunt laborum rerum debitis obcaecati officia sed autem quae temporibus repellendus! Nam deleniti debitis placeat laudantium illum cupiditate repellendus, quis laboriosam distinctio repudiandae. Quibusdam deleniti inventore perspiciatis aspernatur? Officia illum neque, eos distinctio repellendus quod odio hic labore unde necessitatibus voluptates doloribus. Ea in aliquam dolorem iure. Voluptatem dolores dicta iste sed eos a exercitationem molestias ipsa, quod natus similique corrupti ipsam fuga id cupiditate reprehenderit pariatur?</p></div>
</div>
<div class="grid features">
<div class="feature"><p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut deleniti aliquid obcaecati hic laudantium molestiae ea beatae maxime explicabo velit commodi, mollitia ratione corporis itaque suscipit sint eaque iure, ab doloribus quibusdam? Itaque beatae eaque nesciunt! Saepe mollitia veritatis accusamus aspernatur itaque modi alias dolores corrupti omnis odit, vero iusto repudiandae. Deleniti vel adipisci eveniet reiciendis natus? Quia iure sint debitis veritatis illo optio repellat? Blanditiis dicta atque quam possimus asperiores laudantium! Nulla modi facilis quas provident eaque hic cum obcaecati distinctio, qui soluta illo ratione expedita nihil. Distinctio voluptate qui autem. Debitis aliquid porro cupiditate accusantium, sunt quibusdam animi!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis iusto totam labore cum laborum rem amet, impedit eveniet dolorum quaerat natus magnam sed quidem ipsum suscipit velit? Corrupti eligendi cumque aliquam a tenetur, cupiditate, sint illo ut explicabo ex exercitationem reiciendis. Sapiente nostrum est voluptatum. At distinctio voluptate laboriosam? Quos voluptas blanditiis magnam quaerat sit cumque placeat possimus iure accusamus ex laudantium quasi unde, laboriosam similique ullam iste magni distinctio quis veniam eius. Magni aliquid ipsum eligendi odit cupiditate deserunt in libero laudantium, beatae hic nemo natus culpa dolore quas impedit exercitationem atque rerum! A est hic temporibus minus laborum!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus est earum sit quam aliquid ratione eaque nihil magni exercitationem veritatis nemo ex, ipsum et deserunt fugit porro commodi magnam quibusdam omnis molestias tempora! Deserunt laborum rerum debitis obcaecati officia sed autem quae temporibus repellendus! Nam deleniti debitis placeat laudantium illum cupiditate repellendus, quis laboriosam distinctio repudiandae. Quibusdam deleniti inventore perspiciatis aspernatur? Officia illum neque, eos distinctio repellendus quod odio hic labore unde necessitatibus voluptates doloribus. Ea in aliquam dolorem iure. Voluptatem dolores dicta iste sed eos a exercitationem molestias ipsa, quod natus similique corrupti ipsam fuga id cupiditate reprehenderit pariatur?</p></div>
</div>
<div class="grid features">
<div class="feature"><p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut deleniti aliquid obcaecati hic laudantium molestiae ea beatae maxime explicabo velit commodi, mollitia ratione corporis itaque suscipit sint eaque iure, ab doloribus quibusdam? Itaque beatae eaque nesciunt! Saepe mollitia veritatis accusamus aspernatur itaque modi alias dolores corrupti omnis odit, vero iusto repudiandae. Deleniti vel adipisci eveniet reiciendis natus? Quia iure sint debitis veritatis illo optio repellat? Blanditiis dicta atque quam possimus asperiores laudantium! Nulla modi facilis quas provident eaque hic cum obcaecati distinctio, qui soluta illo ratione expedita nihil. Distinctio voluptate qui autem. Debitis aliquid porro cupiditate accusantium, sunt quibusdam animi!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis iusto totam labore cum laborum rem amet, impedit eveniet dolorum quaerat natus magnam sed quidem ipsum suscipit velit? Corrupti eligendi cumque aliquam a tenetur, cupiditate, sint illo ut explicabo ex exercitationem reiciendis. Sapiente nostrum est voluptatum. At distinctio voluptate laboriosam? Quos voluptas blanditiis magnam quaerat sit cumque placeat possimus iure accusamus ex laudantium quasi unde, laboriosam similique ullam iste magni distinctio quis veniam eius. Magni aliquid ipsum eligendi odit cupiditate deserunt in libero laudantium, beatae hic nemo natus culpa dolore quas impedit exercitationem atque rerum! A est hic temporibus minus laborum!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus est earum sit quam aliquid ratione eaque nihil magni exercitationem veritatis nemo ex, ipsum et deserunt fugit porro commodi magnam quibusdam omnis molestias tempora! Deserunt laborum rerum debitis obcaecati officia sed autem quae temporibus repellendus! Nam deleniti debitis placeat laudantium illum cupiditate repellendus, quis laboriosam distinctio repudiandae. Quibusdam deleniti inventore perspiciatis aspernatur? Officia illum neque, eos distinctio repellendus quod odio hic labore unde necessitatibus voluptates doloribus. Ea in aliquam dolorem iure. Voluptatem dolores dicta iste sed eos a exercitationem molestias ipsa, quod natus similique corrupti ipsam fuga id cupiditate reprehenderit pariatur?</p></div>
</div>
<div class="grid features">
<div class="feature"><p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut deleniti aliquid obcaecati hic laudantium molestiae ea beatae maxime explicabo velit commodi, mollitia ratione corporis itaque suscipit sint eaque iure, ab doloribus quibusdam? Itaque beatae eaque nesciunt! Saepe mollitia veritatis accusamus aspernatur itaque modi alias dolores corrupti omnis odit, vero iusto repudiandae. Deleniti vel adipisci eveniet reiciendis natus? Quia iure sint debitis veritatis illo optio repellat? Blanditiis dicta atque quam possimus asperiores laudantium! Nulla modi facilis quas provident eaque hic cum obcaecati distinctio, qui soluta illo ratione expedita nihil. Distinctio voluptate qui autem. Debitis aliquid porro cupiditate accusantium, sunt quibusdam animi!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis iusto totam labore cum laborum rem amet, impedit eveniet dolorum quaerat natus magnam sed quidem ipsum suscipit velit? Corrupti eligendi cumque aliquam a tenetur, cupiditate, sint illo ut explicabo ex exercitationem reiciendis. Sapiente nostrum est voluptatum. At distinctio voluptate laboriosam? Quos voluptas blanditiis magnam quaerat sit cumque placeat possimus iure accusamus ex laudantium quasi unde, laboriosam similique ullam iste magni distinctio quis veniam eius. Magni aliquid ipsum eligendi odit cupiditate deserunt in libero laudantium, beatae hic nemo natus culpa dolore quas impedit exercitationem atque rerum! A est hic temporibus minus laborum!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus est earum sit quam aliquid ratione eaque nihil magni exercitationem veritatis nemo ex, ipsum et deserunt fugit porro commodi magnam quibusdam omnis molestias tempora! Deserunt laborum rerum debitis obcaecati officia sed autem quae temporibus repellendus! Nam deleniti debitis placeat laudantium illum cupiditate repellendus, quis laboriosam distinctio repudiandae. Quibusdam deleniti inventore perspiciatis aspernatur? Officia illum neque, eos distinctio repellendus quod odio hic labore unde necessitatibus voluptates doloribus. Ea in aliquam dolorem iure. Voluptatem dolores dicta iste sed eos a exercitationem molestias ipsa, quod natus similique corrupti ipsam fuga id cupiditate reprehenderit pariatur?</p></div>
</div>
</body>
</html>
main.js
const features = document.querySelectorAll(".feature");
const observer = new IntersectionObserver(function (entries, observer) {
entries.forEach( entry => {
if (!entry.isIntersecting) {
return
}
entry.target.classList.toggle("viewed")
observer.unobserve(entry.target);
})
}, {threshold: 0, rootMargin: "-200px"})
features.forEach(feature => {
observer.observe(feature)
})
style.css
body{
overflow-x: hidden;
}
.space{
height: 100vh;
}
.grid{
display: grid;
}
.grid.features{
gap: 2rem;
grid-template-columns: repeat(3, 1fr);
}
.feature{
opacity: 0;
transition: opacity 200ms ease-in,
transform 200ms ease-in;
transform: translateX(400px);
}
.viewed{
opacity: 1 !important;
transform: translateX(0px) !important;
}
Image

Related

Dynamic Grid Height Depending on Number of Elements

I am trying to achieve a CSS Grid layout with two columns: the left column consists of a single element (e.g. a post) while the right column can have up to three posts (can have one or two, as well).
A basic example of the HTML layout would look like this:
<div class="grid">
<div class="primary">Potentially long text, but at most 1000px high...</div>
<div class="secondary">Text 1...</div>
<div class="secondary">Text 2...</div>
<div class="secondary">Text 3...</div>
</div>
Since the number of posts on the right side is dynamic, I can't really define an explicit grid with three rows, or else I will have empty grid cells if I end up with fewer than three posts.
I can't use grid-row: 1 / -1 on the left column without defining an explicit grid with three rows (at least from what I can tell).
The end goal is to have a blog post layout which features an article on the left side in full length, but only up to a specific height (e.g. 1000px, overflow hidden, text fading out), and up to three more posts on the right side with only excerpt-length of text. The columns of the grid should have equal height at all times but the right column's height should never extend the max-height set for the left column (the 1000px).
If the right side only has one or two posts, the left column should shrink accordingly. In other words, the posts on the right side should never have more whitespace than necessary because of the left column being too high.
To clarify: The height should ultimately be controlled by the right side and the posts on the right side should not be stretched if there is a very long text on the left side, instead the left side should be cut off at 1000px.
I created a codepen to illustrate my problem, or rather the situation I'm stuck in at the moment: https://codepen.io/cwardle/pen/ExZJJXL.
.grid {
display: grid;
column-gap: 1rem;
padding: 2rem;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, auto);
}
.primary {
grid-row: 1 / -1;
position: relative;
max-height: 300px;
background: #cecece;
overflow: hidden;
}
.primary:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(transparent 200px, #fff);
}
.secondary {
grid-column-start: 2;
background: #aaa;
margin-block-end: 1rem;
}
.secondary:last-child {
margin-block-end: 0;
}
<div class="grid">
<div class="primary">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo nisi, sint odio repellat id enim totam. Aliquid nobis ducimus veniam totam eos et reiciendis porro illum sequi distinctio? Aliquam.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus nulla amet perferendis iure veniam? Obcaecati molestiae laborum similique voluptatibus vel libero? Molestias deserunt nemo et consequuntur quam, saepe quo ratione?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum ut aperiam molestiae cumque nam reprehenderit repellat, quas omnis, delectus possimus id. Enim delectus quasi et cumque quas, temporibus odio alias?
Sequi ullam nostrum nesciunt. Sed distinctio illo eos odit repellendus eum incidunt ex libero mollitia rerum, veritatis cumque pariatur sapiente aliquid autem maiores quia itaque voluptates quidem dolore ratione doloremque!
Ea, illum quibusdam dolores enim ex laborum voluptate repellendus nostrum dicta magnam est temporibus ipsa quisquam aut placeat cupiditate animi earum optio maiores. Eos voluptatibus ad, provident optio eligendi numquam.
Aliquam, consectetur iste eveniet ipsam iusto pariatur exercitationem, incidunt perspiciatis nostrum repudiandae, dignissimos sint quo odit! Hic unde tempore veniam temporibus dolorem totam! Velit at in, distinctio accusamus quasi minima.
Officiis fuga natus assumenda ipsa quaerat, voluptatem rerum voluptas, dicta minus odit, sit earum nobis! Recusandae labore minus rerum modi minima est totam deleniti, eligendi sint quasi adipisci at iure?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias suscipit dignissimos porro nihil commodi et libero, mollitia ipsa. Officia quidem delectus nemo magni doloribus facilis iste rerum cum eum soluta!
Omnis laboriosam illo nisi! Unde tempora exercitationem culpa, architecto dignissimos eum ratione amet doloremque, quam expedita laboriosam voluptas laborum ipsam aliquid sit saepe hic suscipit quidem illum molestiae nisi soluta.
Eveniet natus autem vitae, quasi praesentium pariatur nulla dolorem repellat? Quidem eos eum consectetur eaque mollitia laboriosam vitae libero fugit perspiciatis debitis officiis beatae, commodi odio id reprehenderit tenetur tempora.
Deserunt assumenda debitis, ullam mollitia molestias neque iste obcaecati commodi, vitae quasi laborum aperiam libero itaque eveniet eaque nihil explicabo impedit maxime, ducimus dolores. Rerum voluptate praesentium doloremque dolor autem!
Vitae eius adipisci quisquam, aliquid nemo nostrum inventore rerum molestiae iure vel officia, delectus reiciendis autem dolore, enim earum. Doloremque autem vero amet enim, possimus animi temporibus consequatur aperiam cum.
Fugit aperiam minus expedita voluptates dolor! Quia nihil ducimus dolores error aliquid totam eos alias non, cupiditate tenetur officia necessitatibus odio distinctio sequi quas nostrum, esse dolore vero consectetur earum.
Sunt ratione id totam, itaque doloremque, consectetur pariatur, quisquam deleniti expedita asperiores molestias perspiciatis eius. Rem ratione sapiente rerum eum accusamus maxime quos. Corporis, autem ipsum. At velit sunt tempora!
Animi blanditiis officia, reiciendis hic totam amet ea repellendus voluptatem quae eos! Sunt debitis pariatur perferendis harum consequatur natus cumque sapiente minus ut quae, quo reprehenderit ratione exercitationem omnis tenetur!
Nesciunt enim mollitia non rerum similique rem nisi ab corrupti, ea commodi quas! Commodi repudiandae alias reprehenderit deleniti magni repellendus voluptatibus quod aperiam, veniam laborum distinctio molestiae consequuntur corporis soluta.
Possimus dolore dolores neque distinctio obcaecati praesentium, perspiciatis saepe autem mollitia repellendus quos nulla aliquam alias temporibus, illum deleniti nesciunt, veritatis et odio. Tempore aspernatur odit, explicabo nulla totam cupiditate.
</div>
<div class="secondary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi doloremque tempore dicta nisi vel omnis, rem repudiandae explicabo provident voluptatibus ut magnam atque natus cumque necessitatibus quisquam. Nesciunt, minus maiores.</div>
<div class="secondary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur voluptas vel blanditiis corrupti earum, ipsa quasi corporis dignissimos doloribus sunt, laudantium exercitationem natus, sit accusamus facere quisquam suscipit reiciendis mollitia.</div>
<div class="secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab porro, animi a, molestiae expedita veritatis recusandae repudiandae eligendi id deserunt tempore tenetur unde iste, earum sed nulla quis. Fuga, minus!</div>
</div>
I would highly appreciate any help or pointers you could offer. Thanks.

position:absolute can do the job here:
.grid {
display: grid;
gap: 1rem;
padding: 2rem;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows:1fr; /* all row equal in height */
position:relative;
}
.primary {
top:2rem;
left:2rem;
bottom:2rem;
width:calc(50% - 2.5rem); /* take half the width (the first 1fr) */
position: absolute;
max-height: 300px;
background: #cecece;
overflow: hidden;
}
.primary:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(transparent 200px, #fff);
}
.secondary {
grid-column-start: 2;
background: #aaa;
}
<div class="grid">
<div class="primary">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo nisi, sint odio repellat id enim totam. Aliquid nobis ducimus veniam totam eos et reiciendis porro illum sequi distinctio? Aliquam.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus nulla amet perferendis iure veniam? Obcaecati molestiae laborum similique voluptatibus vel libero? Molestias deserunt nemo et consequuntur quam, saepe quo ratione?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum ut aperiam molestiae cumque nam reprehenderit repellat, quas omnis, delectus possimus id. Enim delectus quasi et cumque quas, temporibus odio alias?
Sequi ullam nostrum nesciunt. Sed distinctio illo eos odit repellendus eum incidunt ex libero mollitia rerum, veritatis cumque pariatur sapiente aliquid autem maiores quia itaque voluptates quidem dolore ratione doloremque!
Ea, illum quibusdam dolores enim ex laborum voluptate repellendus nostrum dicta magnam est temporibus ipsa quisquam aut placeat cupiditate animi earum optio maiores. Eos voluptatibus ad, provident optio eligendi numquam.
Aliquam, consectetur iste eveniet ipsam iusto pariatur exercitationem, incidunt perspiciatis nostrum repudiandae, dignissimos sint quo odit! Hic unde tempore veniam temporibus dolorem totam! Velit at in, distinctio accusamus quasi minima.
Officiis fuga natus assumenda ipsa quaerat, voluptatem rerum voluptas, dicta minus odit, sit earum nobis! Recusandae labore minus rerum modi minima est totam deleniti, eligendi sint quasi adipisci at iure?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias suscipit dignissimos porro nihil commodi et libero, mollitia ipsa. Officia quidem delectus nemo magni doloribus facilis iste rerum cum eum soluta!
Omnis laboriosam illo nisi! Unde tempora exercitationem culpa, architecto dignissimos eum ratione amet doloremque, quam expedita laboriosam voluptas laborum ipsam aliquid sit saepe hic suscipit quidem illum molestiae nisi soluta.
Eveniet natus autem vitae, quasi praesentium pariatur nulla dolorem repellat? Quidem eos eum consectetur eaque mollitia laboriosam vitae libero fugit perspiciatis debitis officiis beatae, commodi odio id reprehenderit tenetur tempora.
Deserunt assumenda debitis, ullam mollitia molestias neque iste obcaecati commodi, vitae quasi laborum aperiam libero itaque eveniet eaque nihil explicabo impedit maxime, ducimus dolores. Rerum voluptate praesentium doloremque dolor autem!
Vitae eius adipisci quisquam, aliquid nemo nostrum inventore rerum molestiae iure vel officia, delectus reiciendis autem dolore, enim earum. Doloremque autem vero amet enim, possimus animi temporibus consequatur aperiam cum.
Fugit aperiam minus expedita voluptates dolor! Quia nihil ducimus dolores error aliquid totam eos alias non, cupiditate tenetur officia necessitatibus odio distinctio sequi quas nostrum, esse dolore vero consectetur earum.
Sunt ratione id totam, itaque doloremque, consectetur pariatur, quisquam deleniti expedita asperiores molestias perspiciatis eius. Rem ratione sapiente rerum eum accusamus maxime quos. Corporis, autem ipsum. At velit sunt tempora!
Animi blanditiis officia, reiciendis hic totam amet ea repellendus voluptatem quae eos! Sunt debitis pariatur perferendis harum consequatur natus cumque sapiente minus ut quae, quo reprehenderit ratione exercitationem omnis tenetur!
Nesciunt enim mollitia non rerum similique rem nisi ab corrupti, ea commodi quas! Commodi repudiandae alias reprehenderit deleniti magni repellendus voluptatibus quod aperiam, veniam laborum distinctio molestiae consequuntur corporis soluta.
Possimus dolore dolores neque distinctio obcaecati praesentium, perspiciatis saepe autem mollitia repellendus quos nulla aliquam alias temporibus, illum deleniti nesciunt, veritatis et odio. Tempore aspernatur odit, explicabo nulla totam cupiditate.
</div>
<div class="secondary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi doloremque tempore dicta nisi vel omnis, rem repudiandae explicabo provident voluptatibus ut magnam atque natus cumque necessitatibus quisquam. Nesciunt, minus maiores.</div>
<div class="secondary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur voluptas vel blanditiis corrupti earum, ipsa quasi corporis dignissimos doloribus sunt, laudantium exercitationem natus, sit accusamus facere quisquam suscipit reiciendis mollitia.</div>
<div class="secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab porro, animi a, molestiae expedita veritatis recusandae repudiandae eligendi id deserunt tempore tenetur unde iste, earum sed nulla quis. Fuga, minus!</div>
</div>
<div class="grid">
<div class="primary">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo nisi, sint odio repellat id enim totam. Aliquid nobis ducimus veniam totam eos et reiciendis porro illum sequi distinctio? Aliquam.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus nulla amet perferendis iure veniam? Obcaecati molestiae laborum similique voluptatibus vel libero? Molestias deserunt nemo et consequuntur quam, saepe quo ratione?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum ut aperiam molestiae cumque nam reprehenderit repellat, quas omnis, delectus possimus id. Enim delectus quasi et cumque quas, temporibus odio alias?
Sequi ullam nostrum nesciunt. Sed distinctio illo eos odit repellendus eum incidunt ex libero mollitia rerum, veritatis cumque pariatur sapiente aliquid autem maiores quia itaque voluptates quidem dolore ratione doloremque!
Ea, illum quibusdam dolores enim ex laborum voluptate repellendus nostrum dicta magnam est temporibus ipsa quisquam aut placeat cupiditate animi earum optio maiores. Eos voluptatibus ad, provident optio eligendi numquam.
Aliquam, consectetur iste eveniet ipsam iusto pariatur exercitationem, incidunt perspiciatis nostrum repudiandae, dignissimos sint quo odit! Hic unde tempore veniam temporibus dolorem totam! Velit at in, distinctio accusamus quasi minima.
Officiis fuga natus assumenda ipsa quaerat, voluptatem rerum voluptas, dicta minus odit, sit earum nobis! Recusandae labore minus rerum modi minima est totam deleniti, eligendi sint quasi adipisci at iure?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias suscipit dignissimos porro nihil commodi et libero, mollitia ipsa. Officia quidem delectus nemo magni doloribus facilis iste rerum cum eum soluta!
Omnis laboriosam illo nisi! Unde tempora exercitationem culpa, architecto dignissimos eum ratione amet doloremque, quam expedita laboriosam voluptas laborum ipsam aliquid sit saepe hic suscipit quidem illum molestiae nisi soluta.
Eveniet natus autem vitae, quasi praesentium pariatur nulla dolorem repellat? Quidem eos eum consectetur eaque mollitia laboriosam vitae libero fugit perspiciatis debitis officiis beatae, commodi odio id reprehenderit tenetur tempora.
Deserunt assumenda debitis, ullam mollitia molestias neque iste obcaecati commodi, vitae quasi laborum aperiam libero itaque eveniet eaque nihil explicabo impedit maxime, ducimus dolores. Rerum voluptate praesentium doloremque dolor autem!
Vitae eius adipisci quisquam, aliquid nemo nostrum inventore rerum molestiae iure vel officia, delectus reiciendis autem dolore, enim earum. Doloremque autem vero amet enim, possimus animi temporibus consequatur aperiam cum.
Fugit aperiam minus expedita voluptates dolor! Quia nihil ducimus dolores error aliquid totam eos alias non, cupiditate tenetur officia necessitatibus odio distinctio sequi quas nostrum, esse dolore vero consectetur earum.
Sunt ratione id totam, itaque doloremque, consectetur pariatur, quisquam deleniti expedita asperiores molestias perspiciatis eius. Rem ratione sapiente rerum eum accusamus maxime quos. Corporis, autem ipsum. At velit sunt tempora!
Animi blanditiis officia, reiciendis hic totam amet ea repellendus voluptatem quae eos! Sunt debitis pariatur perferendis harum consequatur natus cumque sapiente minus ut quae, quo reprehenderit ratione exercitationem omnis tenetur!
Nesciunt enim mollitia non rerum similique rem nisi ab corrupti, ea commodi quas! Commodi repudiandae alias reprehenderit deleniti magni repellendus voluptatibus quod aperiam, veniam laborum distinctio molestiae consequuntur corporis soluta.
Possimus dolore dolores neque distinctio obcaecati praesentium, perspiciatis saepe autem mollitia repellendus quos nulla aliquam alias temporibus, illum deleniti nesciunt, veritatis et odio. Tempore aspernatur odit, explicabo nulla totam cupiditate.
</div>
<div class="secondary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi doloremque tempore dicta nisi vel omnis, rem repudiandae explicabo provident voluptatibus ut magnam atque natus cumque necessitatibus quisquam. Nesciunt, minus maiores.</div>
</div>

This appears to work for me using your snippet if I simply remove the grid-template-rows and increase the height of that container:
.grid {
display: grid;
column-gap: 1rem;
padding: 2rem;
grid-template-columns: repeat(2, 1fr);
}
.primary {
grid-row: 1 / -1;
position: relative;
max-height: 500px;
background: #cecece;
overflow: hidden;
}
.primary:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(transparent 200px, #fff);
}
.secondary {
grid-column-start: 2;
background: #aaa;
margin-block-end: 1rem;
}
.secondary:last-child {
margin-block-end: 0;
}
<div class="grid">
<div class="primary">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo nisi, sint odio repellat id enim totam. Aliquid nobis ducimus veniam totam eos et reiciendis porro illum sequi distinctio? Aliquam.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus nulla amet perferendis iure veniam? Obcaecati molestiae laborum similique voluptatibus vel libero? Molestias deserunt nemo et consequuntur quam, saepe quo ratione?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum ut aperiam molestiae cumque nam reprehenderit repellat, quas omnis, delectus possimus id. Enim delectus quasi et cumque quas, temporibus odio alias?
Sequi ullam nostrum nesciunt. Sed distinctio illo eos odit repellendus eum incidunt ex libero mollitia rerum, veritatis cumque pariatur sapiente aliquid autem maiores quia itaque voluptates quidem dolore ratione doloremque!
Ea, illum quibusdam dolores enim ex laborum voluptate repellendus nostrum dicta magnam est temporibus ipsa quisquam aut placeat cupiditate animi earum optio maiores. Eos voluptatibus ad, provident optio eligendi numquam.
Aliquam, consectetur iste eveniet ipsam iusto pariatur exercitationem, incidunt perspiciatis nostrum repudiandae, dignissimos sint quo odit! Hic unde tempore veniam temporibus dolorem totam! Velit at in, distinctio accusamus quasi minima.
Officiis fuga natus assumenda ipsa quaerat, voluptatem rerum voluptas, dicta minus odit, sit earum nobis! Recusandae labore minus rerum modi minima est totam deleniti, eligendi sint quasi adipisci at iure?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias suscipit dignissimos porro nihil commodi et libero, mollitia ipsa. Officia quidem delectus nemo magni doloribus facilis iste rerum cum eum soluta!
Omnis laboriosam illo nisi! Unde tempora exercitationem culpa, architecto dignissimos eum ratione amet doloremque, quam expedita laboriosam voluptas laborum ipsam aliquid sit saepe hic suscipit quidem illum molestiae nisi soluta.
Eveniet natus autem vitae, quasi praesentium pariatur nulla dolorem repellat? Quidem eos eum consectetur eaque mollitia laboriosam vitae libero fugit perspiciatis debitis officiis beatae, commodi odio id reprehenderit tenetur tempora.
Deserunt assumenda debitis, ullam mollitia molestias neque iste obcaecati commodi, vitae quasi laborum aperiam libero itaque eveniet eaque nihil explicabo impedit maxime, ducimus dolores. Rerum voluptate praesentium doloremque dolor autem!
Vitae eius adipisci quisquam, aliquid nemo nostrum inventore rerum molestiae iure vel officia, delectus reiciendis autem dolore, enim earum. Doloremque autem vero amet enim, possimus animi temporibus consequatur aperiam cum.
Fugit aperiam minus expedita voluptates dolor! Quia nihil ducimus dolores error aliquid totam eos alias non, cupiditate tenetur officia necessitatibus odio distinctio sequi quas nostrum, esse dolore vero consectetur earum.
Sunt ratione id totam, itaque doloremque, consectetur pariatur, quisquam deleniti expedita asperiores molestias perspiciatis eius. Rem ratione sapiente rerum eum accusamus maxime quos. Corporis, autem ipsum. At velit sunt tempora!
Animi blanditiis officia, reiciendis hic totam amet ea repellendus voluptatem quae eos! Sunt debitis pariatur perferendis harum consequatur natus cumque sapiente minus ut quae, quo reprehenderit ratione exercitationem omnis tenetur!
Nesciunt enim mollitia non rerum similique rem nisi ab corrupti, ea commodi quas! Commodi repudiandae alias reprehenderit deleniti magni repellendus voluptatibus quod aperiam, veniam laborum distinctio molestiae consequuntur corporis soluta.
Possimus dolore dolores neque distinctio obcaecati praesentium, perspiciatis saepe autem mollitia repellendus quos nulla aliquam alias temporibus, illum deleniti nesciunt, veritatis et odio. Tempore aspernatur odit, explicabo nulla totam cupiditate.
</div>
<div class="secondary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi doloremque tempore dicta nisi vel omnis, rem repudiandae explicabo provident voluptatibus ut magnam atque natus cumque necessitatibus quisquam. Nesciunt, minus maiores.</div>
<div class="secondary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur voluptas vel blanditiis corrupti earum, ipsa quasi corporis dignissimos doloribus sunt, laudantium exercitationem natus, sit accusamus facere quisquam suscipit reiciendis mollitia.</div>
<div class="secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab porro, animi a, molestiae expedita veritatis recusandae repudiandae eligendi id deserunt tempore tenetur unde iste, earum sed nulla quis. Fuga, minus!</div>
</div>
Here it is full height, if you didn't want to fade out the content:
.grid {
display: grid;
column-gap: 1rem;
padding: 2rem;
grid-template-columns: repeat(2, 1fr);
}
.primary {
grid-row: 1 / -1;
position: relative;
background: #cecece;
overflow: hidden;
}
.secondary {
grid-column-start: 2;
background: #aaa;
margin-block-end: 1rem;
}
.secondary:last-child {
margin-block-end: 0;
}
<div class="grid">
<div class="primary">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo nisi, sint odio repellat id enim totam. Aliquid nobis ducimus veniam totam eos et reiciendis porro illum sequi distinctio? Aliquam.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus nulla amet perferendis iure veniam? Obcaecati molestiae laborum similique voluptatibus vel libero? Molestias deserunt nemo et consequuntur quam, saepe quo ratione?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum ut aperiam molestiae cumque nam reprehenderit repellat, quas omnis, delectus possimus id. Enim delectus quasi et cumque quas, temporibus odio alias?
Sequi ullam nostrum nesciunt. Sed distinctio illo eos odit repellendus eum incidunt ex libero mollitia rerum, veritatis cumque pariatur sapiente aliquid autem maiores quia itaque voluptates quidem dolore ratione doloremque!
Ea, illum quibusdam dolores enim ex laborum voluptate repellendus nostrum dicta magnam est temporibus ipsa quisquam aut placeat cupiditate animi earum optio maiores. Eos voluptatibus ad, provident optio eligendi numquam.
Aliquam, consectetur iste eveniet ipsam iusto pariatur exercitationem, incidunt perspiciatis nostrum repudiandae, dignissimos sint quo odit! Hic unde tempore veniam temporibus dolorem totam! Velit at in, distinctio accusamus quasi minima.
Officiis fuga natus assumenda ipsa quaerat, voluptatem rerum voluptas, dicta minus odit, sit earum nobis! Recusandae labore minus rerum modi minima est totam deleniti, eligendi sint quasi adipisci at iure?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias suscipit dignissimos porro nihil commodi et libero, mollitia ipsa. Officia quidem delectus nemo magni doloribus facilis iste rerum cum eum soluta!
Omnis laboriosam illo nisi! Unde tempora exercitationem culpa, architecto dignissimos eum ratione amet doloremque, quam expedita laboriosam voluptas laborum ipsam aliquid sit saepe hic suscipit quidem illum molestiae nisi soluta.
Eveniet natus autem vitae, quasi praesentium pariatur nulla dolorem repellat? Quidem eos eum consectetur eaque mollitia laboriosam vitae libero fugit perspiciatis debitis officiis beatae, commodi odio id reprehenderit tenetur tempora.
Deserunt assumenda debitis, ullam mollitia molestias neque iste obcaecati commodi, vitae quasi laborum aperiam libero itaque eveniet eaque nihil explicabo impedit maxime, ducimus dolores. Rerum voluptate praesentium doloremque dolor autem!
Vitae eius adipisci quisquam, aliquid nemo nostrum inventore rerum molestiae iure vel officia, delectus reiciendis autem dolore, enim earum. Doloremque autem vero amet enim, possimus animi temporibus consequatur aperiam cum.
Fugit aperiam minus expedita voluptates dolor! Quia nihil ducimus dolores error aliquid totam eos alias non, cupiditate tenetur officia necessitatibus odio distinctio sequi quas nostrum, esse dolore vero consectetur earum.
Sunt ratione id totam, itaque doloremque, consectetur pariatur, quisquam deleniti expedita asperiores molestias perspiciatis eius. Rem ratione sapiente rerum eum accusamus maxime quos. Corporis, autem ipsum. At velit sunt tempora!
Animi blanditiis officia, reiciendis hic totam amet ea repellendus voluptatem quae eos! Sunt debitis pariatur perferendis harum consequatur natus cumque sapiente minus ut quae, quo reprehenderit ratione exercitationem omnis tenetur!
Nesciunt enim mollitia non rerum similique rem nisi ab corrupti, ea commodi quas! Commodi repudiandae alias reprehenderit deleniti magni repellendus voluptatibus quod aperiam, veniam laborum distinctio molestiae consequuntur corporis soluta.
Possimus dolore dolores neque distinctio obcaecati praesentium, perspiciatis saepe autem mollitia repellendus quos nulla aliquam alias temporibus, illum deleniti nesciunt, veritatis et odio. Tempore aspernatur odit, explicabo nulla totam cupiditate.
</div>
<div class="secondary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi doloremque tempore dicta nisi vel omnis, rem repudiandae explicabo provident voluptatibus ut magnam atque natus cumque necessitatibus quisquam. Nesciunt, minus maiores.</div>
<div class="secondary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur voluptas vel blanditiis corrupti earum, ipsa quasi corporis dignissimos doloribus sunt, laudantium exercitationem natus, sit accusamus facere quisquam suscipit reiciendis mollitia.</div>
<div class="secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab porro, animi a, molestiae expedita veritatis recusandae repudiandae eligendi id deserunt tempore tenetur unde iste, earum sed nulla quis. Fuga, minus!</div>
</div>

how to solve div preventing anchor from working

I am editing a website and one specific anchor link isn't working anymore. It's not my code and I found out it's one div preventing it from working but don't know what exactly is causing it and how to solve..
.link-1 a {
background: url(/common/image/icon_link_01.gif) 0 50% no-repeat;
padding-left: 16px;
*zoom: 1;
}
div.pagetop-block {
_height: 1%;
margin-bottom: 25px;
margin-top: 27px;
*zoom: 1;
}
div.pagetop-block:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
div.pagetop-block p {
float: right;
font-size: 83.4%;
line-height: 1.4;
}
<div class="pagetop-block">
<p class="link-1">
先頭に戻る</p>
</div>
Tia!
You can find the full source here:
http://niwashyu.jp/about/outline.html
I only posted the relevant snippet.

Is it mandatory to use P tags?
<div class = "pagetop-block"> back </ div>
If you modify it as above, the link will work.

If it is your menu item then you need to find id name "pagetop", Your menu item may calling id(pagetop)
I have created one demo for you, you can check it out.
I have added id name pagetop on div of "You are here"
.mb-50{
margin-bottom: 50px;
}
div.pagetop-block {
height: 1%;
margin-bottom: 25px;
margin-top: 27px;
}
div.pagetop-block:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
div.pagetop-block p {
float: right;
font-size: 83.4%;
line-height: 1.4;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!doctype html>
<html dir="ltr" lang="en-US">
<head>
<title>Demo</title>
<link type="image/x-icon" rel="shortcut icon" href="assets/image/favicon.png" />

<meta charset="UTF-8" />
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
</head>
<body>

<div class="pagetop-block">
<p class="link-1">
先頭に戻る
</p>
</div>
<div class="mb-50">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
</div>
<div class="mb-50">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
</div>
<div class="mb-50">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
</div>
<div class="mb-50" id="pagetop">
<h2 style="color: red; margin-top: 50px; margin-bottom: 50px;"> You are here </h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
</div>
<div class="mb-50">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
</div>
<div class="mb-50">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perferendis atque aut, sed ipsa, error accusamus, minus adipisci placeat fugiat quisquam rerum. Voluptatem, animi odit. Necessitatibus veniam excepturi blanditiis at dolorum distinctio consequuntur adipisci sit veritatis hic tempore laboriosam est odit, eius dolorem dicta eum error! Ipsum soluta odit architecto numquam ad, maxime eum perspiciatis consequuntur cupiditate voluptatem deserunt, vero molestiae reiciendis ipsa velit mollitia sequi delectus autem. Dignissimos libero sequi nemo architecto consequatur temporibus veniam labore sint minima mollitia, commodi voluptates corporis aspernatur esse? Esse sunt aspernatur aperiam itaque, nam dicta dolor quae nihil provident saepe quas officiis quis!
</div>

<script>
$('.pagetop-block a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 2000);
return false;
});
</script>
</body>
</html>

independently-sized text columns in CSS?

I wanted to create a text-based page using just HTML and CSS, the point is that there should be two columns, the first 2/3 of the width (as it will be filled by the important text) and the later one 1/3 of the remaining width, just to add details and so,
ive been fidgeting with this code:
.position-trbl-0 {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.overflow-hidden {
overflow: hidden;
}
.row {
display: flex;
overflow: hidden;
height: 100%;
width: 100%;
}
.col {
height: 100%;
padding: 0 20px;
overflow: hidden;
}
.col-inner {
height: 100%;
width: 100%;
padding: 0 30px;
overflow-y: scroll;
box-sizing: content-box;
}
.overflow-auto {
overflow: auto;
}
<div class="w-100 position-fixed position-trbl-0">
<div class="container-fluid position-relative position-trbl-0 overflow-hidden h-100">
<div class="row">
<div class="col">
<div class="col-inner">
<p class="p-4">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem voluptates suscipit vero perferendis, odio officiis doloribus quae voluptatum debitis sint reiciendis, expedita, saepe eligendi esse numquam! Odio aperiam quidem delectus?
Enim repellendus nemo dolorum culpa accusantium? At ab laborum harum quasi sunt impedit labore ullam. Saepe ut dolorum omnis, corrupti eveniet atque, illum nulla quia soluta error officiis consequuntur inventore!
Cupiditate, ipsum consectetur labore beatae quia adipisci dignissimos illum molestias, sed facere temporibus sint sit et neque. Animi dolores nemo pariatur dolor delectus assumenda temporibus, ratione dignissimos rem cum voluptas.
Libero aliquid laborum doloremque fuga impedit? Consequatur fuga ea, illo dolores sunt maiores laboriosam blanditiis, numquam quod dicta veniam sequi minima, vitae at! Accusantium maxime animi, iusto a impedit rem.
Necessitatibus ipsam accusantium esse quasi labore, modi veritatis! Dolorum corrupti quisquam fugit unde. Consequatur impedit a totam cum nulla deleniti at atque commodi et repellat! Exercitationem quisquam ducimus itaque accusantium?
Neque voluptate id quisquam deleniti voluptas distinctio veniam quasi ipsum nam, vitae, ipsa nihil. Voluptas quisquam vel eligendi consequuntur sit rerum rem a magni, dolorem quod cumque? Accusantium, neque assumenda!
Tempore dignissimos corporis, ratione nihil qui quod itaque facilis laudantium quasi impedit cumque facere ex debitis distinctio ab ipsa beatae enim ut libero. Voluptatum quibusdam soluta quo, voluptatem at a.
Natus explicabo alias, non vel veniam similique soluta enim porro corporis ea deleniti ipsam consectetur debitis inventore laboriosam omnis nihil labore, placeat eligendi? Excepturi quod in sit aut aliquid assumenda.
Architecto assumenda officiis nostrum beatae nam aliquam quisquam tenetur aut. Ipsa earum excepturi, beatae incidunt vero nostrum accusantium. Quam officiis facere eos consectetur fugiat fugit minima, et necessitatibus consequuntur dicta.
Illo modi asperiores incidunt porro voluptates eaque repellendus quis sunt quae nam adipisci, officiis corporis quo dignissimos minus, deserunt amet, nihil fugiat recusandae quibusdam doloribus expedita! Cumque expedita ullam consequatur.
Reprehenderit aperiam, aut nisi ipsa aliquid ipsum hic facilis! Cupiditate, quidem soluta. Facilis rerum, fugit illum laudantium, labore minima corrupti molestiae doloremque corporis itaque animi ullam reprehenderit odio iure? In.
Vero at delectus neque cumque totam, laboriosam ipsa temporibus id voluptates officia aliquam! Nulla, adipisci minima quisquam perferendis incidunt dolorem ab? Reiciendis dolorum expedita iusto! Consequuntur distinctio velit facilis dolorem.
Voluptatum ipsum necessitatibus eligendi natus possimus autem consectetur tenetur, cumque aspernatur dignissimos, est alias vel numquam, accusantium omnis repudiandae laboriosam fugit ex aliquam corporis molestiae! Earum, nobis! Voluptatibus, distinctio saepe.
Voluptatem distinctio doloremque autem libero fugit praesentium neque cum? Vero, molestiae? Adipisci a voluptate, consectetur culpa, quos, reprehenderit sequi maiores cupiditate sit voluptatum distinctio obcaecati illo nesciunt. Iusto, reprehenderit eius.
Cumque vel delectus, tenetur nisi, cupiditate facilis recusandae, optio et voluptatibus voluptas quibusdam accusamus! Cupiditate, asperiores provident necessitatibus ipsa fugit repellendus laborum et dolor possimus fugiat non eaque aut iure.
Tempore earum possimus accusamus ut cum, ipsa odit velit? Quaerat doloribus quam, perspiciatis facere ullam vel, explicabo, voluptas esse minus nam aliquid nobis laudantium! Rerum eos dolor suscipit ratione aperiam.
Sed eaque exercitationem at repudiandae sunt quisquam dolor! Eveniet aliquid nam odio, aliquam, similique voluptates dolor quo non voluptatum sed mollitia, nobis ipsum doloremque enim eaque magnam odit laudantium atque.
Reprehenderit fuga molestiae facere reiciendis, magnam obcaecati itaque consectetur dolorem laborum? Natus distinctio, nemo repudiandae eos quae obcaecati sunt excepturi ut accusamus quam iure quis suscipit ducimus non! Officia, deleniti.
Libero nihil non voluptatem, dolore mollitia perferendis eligendi distinctio pariatur dolor repellendus quae eveniet sit quos alias voluptatum optio illo porro temporibus deserunt doloremque vitae impedit et aliquam minus. Excepturi?
Molestiae, aspernatur repudiandae quidem maiores mollitia laborum illum nisi nihil impedit nam doloremque voluptatem. Quo architecto doloribus, nisi non officiis, perferendis, vel ad maiores assumenda debitis quibusdam eligendi modi perspiciatis?
A dignissimos ullam natus laudantium hic ad, officiis atque maiores magni enim, ea voluptates numquam placeat? Nihil, id odit. Enim, beatae. Odio debitis itaque facere, expedita dicta adipisci possimus nisi.
Alias at aliquam sunt? Aperiam dolorum possimus ab quis nostrum assumenda velit, dignissimos optio dolor repellendus adipisci perspiciatis nihil eveniet numquam cupiditate sint laborum quisquam, ipsum eum magnam? Ipsum, dignissimos?
Fugit tempora a sequi enim perferendis minima itaque consequuntur harum explicabo quidem cum, ea officiis totam odit exercitationem temporibus hic iure, quae sunt aspernatur labore nulla earum. Expedita, eaque esse.
Iusto mollitia, eum rem necessitatibus in architecto sequi dolores maiores labore tempora aliquid optio harum quaerat vel quod recusandae sint aspernatur culpa ab. Nesciunt nemo consequatur adipisci officia pariatur at?
Est placeat voluptas porro architecto ipsum sit. Id inventore odio quia pariatur laboriosam aliquid totam sunt suscipit, incidunt illum ipsum laudantium quis corporis quaerat, accusantium commodi tempora asperiores, maxime facilis.
Rerum ducimus consequatur eos amet, consectetur voluptatem. Enim maxime cumque rerum ut sit fugiat temporibus expedita similique, iusto modi provident quisquam nam deleniti velit animi consequuntur repellendus corrupti, blanditiis neque?
Dolores vero nostrum praesentium adipisci quidem! Ad commodi necessitatibus nam dolorem enim, fuga eaque repudiandae quod ducimus, labore mollitia. Doloribus excepturi vitae quasi optio numquam itaque, exercitationem deleniti esse! Eos?
Soluta a odio incidunt corrupti illum. Amet possimus fugiat atque qui mollitia eum, reprehenderit aliquid ab ex sequi quos! Sint dolorem provident nihil nemo facere, officiis incidunt. Esse, illo voluptatum!
Velit atque, fugit ab dolor est dicta necessitatibus obcaecati vero recusandae inventore rerum saepe iure exercitationem numquam neque. Beatae atque necessitatibus nam facilis, qui eos ea a tempore harum nostrum.
Nulla rerum doloribus pariatur fugit necessitatibus libero explicabo molestias eum excepturi laboriosam quos dolores animi quasi dicta, maxime deserunt! Maiores veritatis cumque illo ad. Libero odio necessitatibus delectus dolorem corporis.
</p>
</div>
</div>
<div class="col">
<div class="col-inner">
<p class="p-4">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem voluptates suscipit vero perferendis, odio officiis doloribus quae voluptatum debitis sint reiciendis, expedita, saepe eligendi esse numquam! Odio aperiam quidem delectus?
Enim repellendus nemo dolorum culpa accusantium? At ab laborum harum quasi sunt impedit labore ullam. Saepe ut dolorum omnis, corrupti eveniet atque, illum nulla quia soluta error officiis consequuntur inventore!
Cupiditate, ipsum consectetur labore beatae quia adipisci dignissimos illum molestias, sed facere temporibus sint sit et neque. Animi dolores nemo pariatur dolor delectus assumenda temporibus, ratione dignissimos rem cum voluptas.
Libero aliquid laborum doloremque fuga impedit? Consequatur fuga ea, illo dolores sunt maiores laboriosam blanditiis, numquam quod dicta veniam sequi minima, vitae at! Accusantium maxime animi, iusto a impedit rem.
Necessitatibus ipsam accusantium esse quasi labore, modi veritatis! Dolorum corrupti quisquam fugit unde. Consequatur impedit a totam cum nulla deleniti at atque commodi et repellat! Exercitationem quisquam ducimus itaque accusantium?
Neque voluptate id quisquam deleniti voluptas distinctio veniam quasi ipsum nam, vitae, ipsa nihil. Voluptas quisquam vel eligendi consequuntur sit rerum rem a magni, dolorem quod cumque? Accusantium, neque assumenda!
Tempore dignissimos corporis, ratione nihil qui quod itaque facilis laudantium quasi impedit cumque facere ex debitis distinctio ab ipsa beatae enim ut libero. Voluptatum quibusdam soluta quo, voluptatem at a.
Natus explicabo alias, non vel veniam similique soluta enim porro corporis ea deleniti ipsam consectetur debitis inventore laboriosam omnis nihil labore, placeat eligendi? Excepturi quod in sit aut aliquid assumenda.
Architecto assumenda officiis nostrum beatae nam aliquam quisquam tenetur aut. Ipsa earum excepturi, beatae incidunt vero nostrum accusantium. Quam officiis facere eos consectetur fugiat fugit minima, et necessitatibus consequuntur dicta.
Illo modi asperiores incidunt porro voluptates eaque repellendus quis sunt quae nam adipisci, officiis corporis quo dignissimos minus, deserunt amet, nihil fugiat recusandae quibusdam doloribus expedita! Cumque expedita ullam consequatur.
Reprehenderit aperiam, aut nisi ipsa aliquid ipsum hic facilis! Cupiditate, quidem soluta. Facilis rerum, fugit illum laudantium, labore minima corrupti molestiae doloremque corporis itaque animi ullam reprehenderit odio iure? In.
Vero at delectus neque cumque totam, laboriosam ipsa temporibus id voluptates officia aliquam! Nulla, adipisci minima quisquam perferendis incidunt dolorem ab? Reiciendis dolorum expedita iusto! Consequuntur distinctio velit facilis dolorem.
Voluptatum ipsum necessitatibus eligendi natus possimus autem consectetur tenetur, cumque aspernatur dignissimos, est alias vel numquam, accusantium omnis repudiandae laboriosam fugit ex aliquam corporis molestiae! Earum, nobis! Voluptatibus, distinctio saepe.
Voluptatem distinctio doloremque autem libero fugit praesentium neque cum? Vero, molestiae? Adipisci a voluptate, consectetur culpa, quos, reprehenderit sequi maiores cupiditate sit voluptatum distinctio obcaecati illo nesciunt. Iusto, reprehenderit eius.
Cumque vel delectus, tenetur nisi, cupiditate facilis recusandae, optio et voluptatibus voluptas quibusdam accusamus! Cupiditate, asperiores provident necessitatibus ipsa fugit repellendus laborum et dolor possimus fugiat non eaque aut iure.
Tempore earum possimus accusamus ut cum, ipsa odit velit? Quaerat doloribus quam, perspiciatis facere ullam vel, explicabo, voluptas esse minus nam aliquid nobis laudantium! Rerum eos dolor suscipit ratione aperiam.
Sed eaque exercitationem at repudiandae sunt quisquam dolor! Eveniet aliquid nam odio, aliquam, similique voluptates dolor quo non voluptatum sed mollitia, nobis ipsum doloremque enim eaque magnam odit laudantium atque.
Reprehenderit fuga molestiae facere reiciendis, magnam obcaecati itaque consectetur dolorem laborum? Natus distinctio, nemo repudiandae eos quae obcaecati sunt excepturi ut accusamus quam iure quis suscipit ducimus non! Officia, deleniti.
Libero nihil non voluptatem, dolore mollitia perferendis eligendi distinctio pariatur dolor repellendus quae eveniet sit quos alias voluptatum optio illo porro temporibus deserunt doloremque vitae impedit et aliquam minus. Excepturi?
Molestiae, aspernatur repudiandae quidem maiores mollitia laborum illum nisi nihil impedit nam doloremque voluptatem. Quo architecto doloribus, nisi non officiis, perferendis, vel ad maiores assumenda debitis quibusdam eligendi modi perspiciatis?
A dignissimos ullam natus laudantium hic ad, officiis atque maiores magni enim, ea voluptates numquam placeat? Nihil, id odit. Enim, beatae. Odio debitis itaque facere, expedita dicta adipisci possimus nisi.
Alias at aliquam sunt? Aperiam dolorum possimus ab quis nostrum assumenda velit, dignissimos optio dolor repellendus adipisci perspiciatis nihil eveniet numquam cupiditate sint laborum quisquam, ipsum eum magnam? Ipsum, dignissimos?
Fugit tempora a sequi enim perferendis minima itaque consequuntur harum explicabo quidem cum, ea officiis totam odit exercitationem temporibus hic iure, quae sunt aspernatur labore nulla earum. Expedita, eaque esse.
Iusto mollitia, eum rem necessitatibus in architecto sequi dolores maiores labore tempora aliquid optio harum quaerat vel quod recusandae sint aspernatur culpa ab. Nesciunt nemo consequatur adipisci officia pariatur at?
Est placeat voluptas porro architecto ipsum sit. Id inventore odio quia pariatur laboriosam aliquid totam sunt suscipit, incidunt illum ipsum laudantium quis corporis quaerat, accusantium commodi tempora asperiores, maxime facilis.
Rerum ducimus consequatur eos amet, consectetur voluptatem. Enim maxime cumque rerum ut sit fugiat temporibus expedita similique, iusto modi provident quisquam nam deleniti velit animi consequuntur repellendus corrupti, blanditiis neque?
Dolores vero nostrum praesentium adipisci quidem! Ad commodi necessitatibus nam dolorem enim, fuga eaque repudiandae quod ducimus, labore mollitia. Doloribus excepturi vitae quasi optio numquam itaque, exercitationem deleniti esse! Eos?
Soluta a odio incidunt corrupti illum. Amet possimus fugiat atque qui mollitia eum, reprehenderit aliquid ab ex sequi quos! Sint dolorem provident nihil nemo facere, officiis incidunt. Esse, illo voluptatum!
Velit atque, fugit ab dolor est dicta necessitatibus obcaecati vero recusandae inventore rerum saepe iure exercitationem numquam neque. Beatae atque necessitatibus nam facilis, qui eos ea a tempore harum nostrum.
Nulla rerum doloribus pariatur fugit necessitatibus libero explicabo molestias eum excepturi laboriosam quos dolores animi quasi dicta, maxime deserunt! Maiores veritatis cumque illo ad. Libero odio necessitatibus delectus dolorem corporis.
</p>
</div>
</div>
</div>
</div>
</div>
but can't seem to find it!

This is a grid solution, and the :nth-child() pseudo-class for the col class.
The first column is 2/3 and the second is 1/3.
.position-trbl-0 {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.overflow-hidden {
overflow: hidden;
}
.row {
display: grid;
grid-template-columns: auto auto auto;
overflow: hidden;
height: 100%;
width: 100%;
}
.col {
height: 100%;
padding: 0 20px;
overflow: hidden;
}
.col:nth-child(1) {
grid-column: 1 / span 2;
}
.col-inner {
height: 100%;
width: 100%;
padding: 0 30px;
overflow-y: scroll;
box-sizing: content-box;
}
.overflow-auto {
overflow: auto;
}
<div class="w-100 position-fixed position-trbl-0">
<div class="container-fluid position-relative position-trbl-0 overflow-hidden h-100">
<div class="row">
<div class="col">
<div class="col-inner">
<p class="p-4">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem voluptates suscipit vero perferendis, odio officiis doloribus quae voluptatum debitis sint reiciendis, expedita, saepe eligendi esse numquam! Odio aperiam quidem delectus?
Enim repellendus nemo dolorum culpa accusantium? At ab laborum harum quasi sunt impedit labore ullam. Saepe ut dolorum omnis, corrupti eveniet atque, illum nulla quia soluta error officiis consequuntur inventore!
Cupiditate, ipsum consectetur labore beatae quia adipisci dignissimos illum molestias, sed facere temporibus sint sit et neque. Animi dolores nemo pariatur dolor delectus assumenda temporibus, ratione dignissimos rem cum voluptas.
Libero aliquid laborum doloremque fuga impedit? Consequatur fuga ea, illo dolores sunt maiores laboriosam blanditiis, numquam quod dicta veniam sequi minima, vitae at! Accusantium maxime animi, iusto a impedit rem.
Necessitatibus ipsam accusantium esse quasi labore, modi veritatis! Dolorum corrupti quisquam fugit unde. Consequatur impedit a totam cum nulla deleniti at atque commodi et repellat! Exercitationem quisquam ducimus itaque accusantium?
Neque voluptate id quisquam deleniti voluptas distinctio veniam quasi ipsum nam, vitae, ipsa nihil. Voluptas quisquam vel eligendi consequuntur sit rerum rem a magni, dolorem quod cumque? Accusantium, neque assumenda!
Tempore dignissimos corporis, ratione nihil qui quod itaque facilis laudantium quasi impedit cumque facere ex debitis distinctio ab ipsa beatae enim ut libero. Voluptatum quibusdam soluta quo, voluptatem at a.
Natus explicabo alias, non vel veniam similique soluta enim porro corporis ea deleniti ipsam consectetur debitis inventore laboriosam omnis nihil labore, placeat eligendi? Excepturi quod in sit aut aliquid assumenda.
Architecto assumenda officiis nostrum beatae nam aliquam quisquam tenetur aut. Ipsa earum excepturi, beatae incidunt vero nostrum accusantium. Quam officiis facere eos consectetur fugiat fugit minima, et necessitatibus consequuntur dicta.
Illo modi asperiores incidunt porro voluptates eaque repellendus quis sunt quae nam adipisci, officiis corporis quo dignissimos minus, deserunt amet, nihil fugiat recusandae quibusdam doloribus expedita! Cumque expedita ullam consequatur.
Reprehenderit aperiam, aut nisi ipsa aliquid ipsum hic facilis! Cupiditate, quidem soluta. Facilis rerum, fugit illum laudantium, labore minima corrupti molestiae doloremque corporis itaque animi ullam reprehenderit odio iure? In.
Vero at delectus neque cumque totam, laboriosam ipsa temporibus id voluptates officia aliquam! Nulla, adipisci minima quisquam perferendis incidunt dolorem ab? Reiciendis dolorum expedita iusto! Consequuntur distinctio velit facilis dolorem.
Voluptatum ipsum necessitatibus eligendi natus possimus autem consectetur tenetur, cumque aspernatur dignissimos, est alias vel numquam, accusantium omnis repudiandae laboriosam fugit ex aliquam corporis molestiae! Earum, nobis! Voluptatibus, distinctio saepe.
Voluptatem distinctio doloremque autem libero fugit praesentium neque cum? Vero, molestiae? Adipisci a voluptate, consectetur culpa, quos, reprehenderit sequi maiores cupiditate sit voluptatum distinctio obcaecati illo nesciunt. Iusto, reprehenderit eius.
Cumque vel delectus, tenetur nisi, cupiditate facilis recusandae, optio et voluptatibus voluptas quibusdam accusamus! Cupiditate, asperiores provident necessitatibus ipsa fugit repellendus laborum et dolor possimus fugiat non eaque aut iure.
Tempore earum possimus accusamus ut cum, ipsa odit velit? Quaerat doloribus quam, perspiciatis facere ullam vel, explicabo, voluptas esse minus nam aliquid nobis laudantium! Rerum eos dolor suscipit ratione aperiam.
Sed eaque exercitationem at repudiandae sunt quisquam dolor! Eveniet aliquid nam odio, aliquam, similique voluptates dolor quo non voluptatum sed mollitia, nobis ipsum doloremque enim eaque magnam odit laudantium atque.
Reprehenderit fuga molestiae facere reiciendis, magnam obcaecati itaque consectetur dolorem laborum? Natus distinctio, nemo repudiandae eos quae obcaecati sunt excepturi ut accusamus quam iure quis suscipit ducimus non! Officia, deleniti.
Libero nihil non voluptatem, dolore mollitia perferendis eligendi distinctio pariatur dolor repellendus quae eveniet sit quos alias voluptatum optio illo porro temporibus deserunt doloremque vitae impedit et aliquam minus. Excepturi?
Molestiae, aspernatur repudiandae quidem maiores mollitia laborum illum nisi nihil impedit nam doloremque voluptatem. Quo architecto doloribus, nisi non officiis, perferendis, vel ad maiores assumenda debitis quibusdam eligendi modi perspiciatis?
A dignissimos ullam natus laudantium hic ad, officiis atque maiores magni enim, ea voluptates numquam placeat? Nihil, id odit. Enim, beatae. Odio debitis itaque facere, expedita dicta adipisci possimus nisi.
Alias at aliquam sunt? Aperiam dolorum possimus ab quis nostrum assumenda velit, dignissimos optio dolor repellendus adipisci perspiciatis nihil eveniet numquam cupiditate sint laborum quisquam, ipsum eum magnam? Ipsum, dignissimos?
Fugit tempora a sequi enim perferendis minima itaque consequuntur harum explicabo quidem cum, ea officiis totam odit exercitationem temporibus hic iure, quae sunt aspernatur labore nulla earum. Expedita, eaque esse.
Iusto mollitia, eum rem necessitatibus in architecto sequi dolores maiores labore tempora aliquid optio harum quaerat vel quod recusandae sint aspernatur culpa ab. Nesciunt nemo consequatur adipisci officia pariatur at?
Est placeat voluptas porro architecto ipsum sit. Id inventore odio quia pariatur laboriosam aliquid totam sunt suscipit, incidunt illum ipsum laudantium quis corporis quaerat, accusantium commodi tempora asperiores, maxime facilis.
Rerum ducimus consequatur eos amet, consectetur voluptatem. Enim maxime cumque rerum ut sit fugiat temporibus expedita similique, iusto modi provident quisquam nam deleniti velit animi consequuntur repellendus corrupti, blanditiis neque?
Dolores vero nostrum praesentium adipisci quidem! Ad commodi necessitatibus nam dolorem enim, fuga eaque repudiandae quod ducimus, labore mollitia. Doloribus excepturi vitae quasi optio numquam itaque, exercitationem deleniti esse! Eos?
Soluta a odio incidunt corrupti illum. Amet possimus fugiat atque qui mollitia eum, reprehenderit aliquid ab ex sequi quos! Sint dolorem provident nihil nemo facere, officiis incidunt. Esse, illo voluptatum!
Velit atque, fugit ab dolor est dicta necessitatibus obcaecati vero recusandae inventore rerum saepe iure exercitationem numquam neque. Beatae atque necessitatibus nam facilis, qui eos ea a tempore harum nostrum.
Nulla rerum doloribus pariatur fugit necessitatibus libero explicabo molestias eum excepturi laboriosam quos dolores animi quasi dicta, maxime deserunt! Maiores veritatis cumque illo ad. Libero odio necessitatibus delectus dolorem corporis.
</p>
</div>
</div>
<div class="col">
<div class="col-inner">
<p class="p-4">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem voluptates suscipit vero perferendis, odio officiis doloribus quae voluptatum debitis sint reiciendis, expedita, saepe eligendi esse numquam! Odio aperiam quidem delectus?
Enim repellendus nemo dolorum culpa accusantium? At ab laborum harum quasi sunt impedit labore ullam. Saepe ut dolorum omnis, corrupti eveniet atque, illum nulla quia soluta error officiis consequuntur inventore!
Cupiditate, ipsum consectetur labore beatae quia adipisci dignissimos illum molestias, sed facere temporibus sint sit et neque. Animi dolores nemo pariatur dolor delectus assumenda temporibus, ratione dignissimos rem cum voluptas.
Libero aliquid laborum doloremque fuga impedit? Consequatur fuga ea, illo dolores sunt maiores laboriosam blanditiis, numquam quod dicta veniam sequi minima, vitae at! Accusantium maxime animi, iusto a impedit rem.
Necessitatibus ipsam accusantium esse quasi labore, modi veritatis! Dolorum corrupti quisquam fugit unde. Consequatur impedit a totam cum nulla deleniti at atque commodi et repellat! Exercitationem quisquam ducimus itaque accusantium?
Neque voluptate id quisquam deleniti voluptas distinctio veniam quasi ipsum nam, vitae, ipsa nihil. Voluptas quisquam vel eligendi consequuntur sit rerum rem a magni, dolorem quod cumque? Accusantium, neque assumenda!
Tempore dignissimos corporis, ratione nihil qui quod itaque facilis laudantium quasi impedit cumque facere ex debitis distinctio ab ipsa beatae enim ut libero. Voluptatum quibusdam soluta quo, voluptatem at a.
Natus explicabo alias, non vel veniam similique soluta enim porro corporis ea deleniti ipsam consectetur debitis inventore laboriosam omnis nihil labore, placeat eligendi? Excepturi quod in sit aut aliquid assumenda.
Architecto assumenda officiis nostrum beatae nam aliquam quisquam tenetur aut. Ipsa earum excepturi, beatae incidunt vero nostrum accusantium. Quam officiis facere eos consectetur fugiat fugit minima, et necessitatibus consequuntur dicta.
Illo modi asperiores incidunt porro voluptates eaque repellendus quis sunt quae nam adipisci, officiis corporis quo dignissimos minus, deserunt amet, nihil fugiat recusandae quibusdam doloribus expedita! Cumque expedita ullam consequatur.
Reprehenderit aperiam, aut nisi ipsa aliquid ipsum hic facilis! Cupiditate, quidem soluta. Facilis rerum, fugit illum laudantium, labore minima corrupti molestiae doloremque corporis itaque animi ullam reprehenderit odio iure? In.
Vero at delectus neque cumque totam, laboriosam ipsa temporibus id voluptates officia aliquam! Nulla, adipisci minima quisquam perferendis incidunt dolorem ab? Reiciendis dolorum expedita iusto! Consequuntur distinctio velit facilis dolorem.
Voluptatum ipsum necessitatibus eligendi natus possimus autem consectetur tenetur, cumque aspernatur dignissimos, est alias vel numquam, accusantium omnis repudiandae laboriosam fugit ex aliquam corporis molestiae! Earum, nobis! Voluptatibus, distinctio saepe.
Voluptatem distinctio doloremque autem libero fugit praesentium neque cum? Vero, molestiae? Adipisci a voluptate, consectetur culpa, quos, reprehenderit sequi maiores cupiditate sit voluptatum distinctio obcaecati illo nesciunt. Iusto, reprehenderit eius.
Cumque vel delectus, tenetur nisi, cupiditate facilis recusandae, optio et voluptatibus voluptas quibusdam accusamus! Cupiditate, asperiores provident necessitatibus ipsa fugit repellendus laborum et dolor possimus fugiat non eaque aut iure.
Tempore earum possimus accusamus ut cum, ipsa odit velit? Quaerat doloribus quam, perspiciatis facere ullam vel, explicabo, voluptas esse minus nam aliquid nobis laudantium! Rerum eos dolor suscipit ratione aperiam.
Sed eaque exercitationem at repudiandae sunt quisquam dolor! Eveniet aliquid nam odio, aliquam, similique voluptates dolor quo non voluptatum sed mollitia, nobis ipsum doloremque enim eaque magnam odit laudantium atque.
Reprehenderit fuga molestiae facere reiciendis, magnam obcaecati itaque consectetur dolorem laborum? Natus distinctio, nemo repudiandae eos quae obcaecati sunt excepturi ut accusamus quam iure quis suscipit ducimus non! Officia, deleniti.
Libero nihil non voluptatem, dolore mollitia perferendis eligendi distinctio pariatur dolor repellendus quae eveniet sit quos alias voluptatum optio illo porro temporibus deserunt doloremque vitae impedit et aliquam minus. Excepturi?
Molestiae, aspernatur repudiandae quidem maiores mollitia laborum illum nisi nihil impedit nam doloremque voluptatem. Quo architecto doloribus, nisi non officiis, perferendis, vel ad maiores assumenda debitis quibusdam eligendi modi perspiciatis?
A dignissimos ullam natus laudantium hic ad, officiis atque maiores magni enim, ea voluptates numquam placeat? Nihil, id odit. Enim, beatae. Odio debitis itaque facere, expedita dicta adipisci possimus nisi.
Alias at aliquam sunt? Aperiam dolorum possimus ab quis nostrum assumenda velit, dignissimos optio dolor repellendus adipisci perspiciatis nihil eveniet numquam cupiditate sint laborum quisquam, ipsum eum magnam? Ipsum, dignissimos?
Fugit tempora a sequi enim perferendis minima itaque consequuntur harum explicabo quidem cum, ea officiis totam odit exercitationem temporibus hic iure, quae sunt aspernatur labore nulla earum. Expedita, eaque esse.
Iusto mollitia, eum rem necessitatibus in architecto sequi dolores maiores labore tempora aliquid optio harum quaerat vel quod recusandae sint aspernatur culpa ab. Nesciunt nemo consequatur adipisci officia pariatur at?
Est placeat voluptas porro architecto ipsum sit. Id inventore odio quia pariatur laboriosam aliquid totam sunt suscipit, incidunt illum ipsum laudantium quis corporis quaerat, accusantium commodi tempora asperiores, maxime facilis.
Rerum ducimus consequatur eos amet, consectetur voluptatem. Enim maxime cumque rerum ut sit fugiat temporibus expedita similique, iusto modi provident quisquam nam deleniti velit animi consequuntur repellendus corrupti, blanditiis neque?
Dolores vero nostrum praesentium adipisci quidem! Ad commodi necessitatibus nam dolorem enim, fuga eaque repudiandae quod ducimus, labore mollitia. Doloribus excepturi vitae quasi optio numquam itaque, exercitationem deleniti esse! Eos?
Soluta a odio incidunt corrupti illum. Amet possimus fugiat atque qui mollitia eum, reprehenderit aliquid ab ex sequi quos! Sint dolorem provident nihil nemo facere, officiis incidunt. Esse, illo voluptatum!
Velit atque, fugit ab dolor est dicta necessitatibus obcaecati vero recusandae inventore rerum saepe iure exercitationem numquam neque. Beatae atque necessitatibus nam facilis, qui eos ea a tempore harum nostrum.
Nulla rerum doloribus pariatur fugit necessitatibus libero explicabo molestias eum excepturi laboriosam quos dolores animi quasi dicta, maxime deserunt! Maiores veritatis cumque illo ad. Libero odio necessitatibus delectus dolorem corporis.
</p>
</div>
</div>
</div>
</div>
</div>

How to set the boarder/margin to all the content on a page in HTML/CSS?

I want to make a page something similar to this one. I want all the content on this page has margins to the most left side and most right side of the page. What should I put into my code?
The code I have now will make the paragraph fit the width of the webpage which I don't like.

You should create a global container for your content, give it a max-width and then set its margins to 0 auto.
You can try looking at the following snippet in full screen; since I'm telling the .container class to have a maximum width of 600px, the left and right margins will automatically distribute the available space that remains to center the content with margin: 0 auto
.container {
max-width: 600px;
margin: 0 auto;
}
<div class="container">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quo a repellat consequuntur sapiente distinctio, voluptate hic facilis veritatis impedit sed sunt delectus blanditiis soluta tempore cupiditate fugiat ut excepturi accusantium harum neque
eius ex! Ipsum, ratione. Natus, veritatis et vitae, sint explicabo cum iusto, provident laudantium culpa consectetur corrupti exercitationem deserunt hic error quibusdam. Similique officia tenetur suscipit voluptatum hic maiores, eum possimus, aspernatur
fugit ad porro sequi? Assumenda impedit maiores, consectetur beatae expedita in libero! Officia modi officiis harum ratione consectetur, doloribus molestiae, quam animi possimus similique, recusandae a deserunt tenetur aliquam fuga! Modi reprehenderit
placeat natus a laborum nihil voluptatum facere, alias aliquid dolor velit minus libero, corrupti fuga tenetur sapiente est, quo explicabo consequatur? Repellat, adipisci ipsa, saepe praesentium odio, consequatur quia temporibus nemo tempora illo
suscipit beatae. Voluptates corporis, ipsa officiis, ex accusamus assumenda dolor debitis perferendis voluptas quo quisquam tenetur molestias pariatur doloremque dolorem.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quo a repellat consequuntur sapiente distinctio, voluptate hic facilis veritatis impedit sed sunt delectus blanditiis soluta tempore cupiditate fugiat ut excepturi accusantium harum neque
eius ex! Ipsum, ratione. Natus, veritatis et vitae, sint explicabo cum iusto, provident laudantium culpa consectetur corrupti exercitationem deserunt hic error quibusdam. Similique officia tenetur suscipit voluptatum hic maiores, eum possimus, aspernatur
fugit ad porro sequi? Assumenda impedit maiores, consectetur beatae expedita in libero! Officia modi officiis harum ratione consectetur, doloribus molestiae, quam animi possimus similique, recusandae a deserunt tenetur aliquam fuga! Modi reprehenderit
placeat natus a laborum nihil voluptatum facere, alias aliquid dolor velit minus libero, corrupti fuga tenetur sapiente est, quo explicabo consequatur? Repellat, adipisci ipsa, saepe praesentium odio, consequatur quia temporibus nemo tempora illo
suscipit beatae. Voluptates corporis, ipsa officiis, ex accusamus assumenda dolor debitis perferendis voluptas quo quisquam tenetur molestias pariatur doloremque dolorem.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quo a repellat consequuntur sapiente distinctio, voluptate hic facilis veritatis impedit sed sunt delectus blanditiis soluta tempore cupiditate fugiat ut excepturi accusantium harum neque
eius ex! Ipsum, ratione. Natus, veritatis et vitae, sint explicabo cum iusto, provident laudantium culpa consectetur corrupti exercitationem deserunt hic error quibusdam. Similique officia tenetur suscipit voluptatum hic maiores, eum possimus, aspernatur
fugit ad porro sequi? Assumenda impedit maiores, consectetur beatae expedita in libero! Officia modi officiis harum ratione consectetur, doloribus molestiae, quam animi possimus similique, recusandae a deserunt tenetur aliquam fuga! Modi reprehenderit
placeat natus a laborum nihil voluptatum facere, alias aliquid dolor velit minus libero, corrupti fuga tenetur sapiente est, quo explicabo consequatur? Repellat, adipisci ipsa, saepe praesentium odio, consequatur quia temporibus nemo tempora illo
suscipit beatae. Voluptates corporis, ipsa officiis, ex accusamus assumenda dolor debitis perferendis voluptas quo quisquam tenetur molestias pariatur doloremque dolorem.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quo a repellat consequuntur sapiente distinctio, voluptate hic facilis veritatis impedit sed sunt delectus blanditiis soluta tempore cupiditate fugiat ut excepturi accusantium harum neque
eius ex! Ipsum, ratione. Natus, veritatis et vitae, sint explicabo cum iusto, provident laudantium culpa consectetur corrupti exercitationem deserunt hic error quibusdam. Similique officia tenetur suscipit voluptatum hic maiores, eum possimus, aspernatur
fugit ad porro sequi? Assumenda impedit maiores, consectetur beatae expedita in libero! Officia modi officiis harum ratione consectetur, doloribus molestiae, quam animi possimus similique, recusandae a deserunt tenetur aliquam fuga! Modi reprehenderit
placeat natus a laborum nihil voluptatum facere, alias aliquid dolor velit minus libero, corrupti fuga tenetur sapiente est, quo explicabo consequatur? Repellat, adipisci ipsa, saepe praesentium odio, consequatur quia temporibus nemo tempora illo
suscipit beatae. Voluptates corporis, ipsa officiis, ex accusamus assumenda dolor debitis perferendis voluptas quo quisquam tenetur molestias pariatur doloremque dolorem.
</p>
</div>

Bootstrap Grid System not displaying in columns

I want to have three columns of text appear on the screen and a jumbotron like
this. When I run the site, I just get a jumbotron at the top, and then three rows of text each taking up 100% of the page width. How do I get bootstrap to turn the divs into a proper grid layout? I have tried putting other rows inside like some tutorials said to do, but they all failed. Any ideas how I could achieve a working grid layout?
.jumbotron {
padding: 30px 10px;
background-color: #d8d8d8;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lorem ipsum dolor sit.</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="row">
<div class="jumbotron">
<div class="container">
<h1>Lorem ipsum dolor.</h1>
<h3>Lorem ipsum dolor sit amet, consectetur.</h3>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint quas neque, alias repudiandae autem. Laudantium commodi ratione qui facere similique consequatur repudiandae, fugit odio incidunt soluta nihil dicta quasi animi, laboriosam fuga pariatur
possimus vel. Ex odit repellat commodi temporibus perspiciatis neque, iste, rem eaque, ipsum vel inventore sunt facere assumenda cum modi ea facilis quisquam adipisci sed nihil dolores nesciunt expedita. Magnam iusto ad a cupiditate corporis
provident at, asperiores eum aliquid adipisci soluta quidem debitis numquam. Vel fuga omnis ea, rem quidem voluptatibus inventore expedita repudiandae quaerat voluptatem, at autem tempore aperiam, suscipit consequatur similique aspernatur laudantium
consequuntur!
</p>
</div>
<div class="col-md-6">
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, asperiores, dolore. Distinctio, quia, dolor dolore cumque veritatis consequatur perferendis aliquam soluta beatae aperiam odit praesentium animi omnis reprehenderit ullam ea deserunt
consequuntur totam. Aperiam debitis labore vero perferendis fuga in quas dolore, odio amet, incidunt, quidem natus eos blanditiis ad dolores fugiat minima ut iste ullam totam ducimus assumenda asperiores, voluptate vitae cumque? Inventore laboriosam
ducimus culpa tempore eligendi voluptatibus optio, placeat eum necessitatibus blanditiis rem voluptates ea illum beatae architecto minima, autem saepe quibusdam expedita dolorum. Maiores at deserunt laboriosam ab dolorum libero, suscipit ullam
veniam ipsum non minima, aperiam, commodi rerum! Magnam dignissimos magni optio porro minus, deserunt totam sequi, voluptas doloremque voluptatibus est, aperiam unde repellendus vel odit facere ipsam velit consequuntur praesentium cumque ea,
quisquam natus. Dicta reiciendis voluptas, facere placeat in fugit perspiciatis architecto totam harum ducimus quisquam nemo, sapiente natus praesentium esse nihil inventore distinctio minus molestiae possimus earum ea tenetur? A velit, dicta
eaque iste explicabo aliquid, aspernatur animi atque at totam voluptatum vel maxime voluptas error libero rerum quam voluptatem porro deleniti perferendis ab commodi vitae. Veniam ad, vero voluptatem exercitationem ex dolor voluptatum, aperiam
cupiditate dolore hic officiis quasi modi. Hic dolore temporibus, tenetur, obcaecati facere quos similique nesciunt amet tempora fugiat incidunt dolorem placeat minus totam recusandae laborum, cum exercitationem aliquid sunt fugit iure ab. Maxime,
itaque aliquid? Non repellendus unde id. Vel reiciendis omnis doloremque molestiae necessitatibus incidunt voluptatum eveniet repellat enim perspiciatis itaque at dolorem tempore alias error, repellendus nulla quia corrupti cupiditate. Obcaecati
delectus saepe error cumque ex, deleniti tenetur necessitatibus beatae at quis fugiat vitae natus laboriosam aperiam eveniet reiciendis ipsa repudiandae. Necessitatibus maiores unde eveniet aspernatur autem eligendi soluta non iure, molestiae
repudiandae quisquam, id quaerat sint. Autem at architecto eligendi aut voluptatem voluptatibus vitae accusantium quod assumenda consectetur libero eveniet recusandae, consequuntur repudiandae id suscipit unde nulla delectus eum sed, neque enim
ipsam. Optio nesciunt dolorum iure omnis aspernatur. Recusandae est aut sit delectus minima repellat nisi dolorem impedit velit deserunt optio magni, laboriosam accusamus facilis veritatis perspiciatis similique quia eius explicabo. Veniam odio
corporis rem nemo, sunt quod asperiores adipisci aut tempore architecto quo sapiente ex ad nisi et vitae amet deleniti corrupti, nesciunt doloribus unde repellat. Libero sint quod ab amet natus, non assumenda sit magnam, similique, itaque ratione
soluta nobis! Natus laborum nobis necessitatibus nihil veniam eveniet quos beatae repellendus saepe!
</h5>
</div>
<div class="col-md-3">
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum aperiam incidunt ducimus officia! Quos dolorem iure fugit eligendi a omnis totam modi molestias eaque natus, deleniti eum! Veniam accusamus laborum optio neque corporis ut obcaecati
saepe facilis, deserunt. Maiores perferendis architecto incidunt sequi nesciunt quia blanditiis a voluptatum nam nemo unde hic facere cumque ex pariatur dicta, culpa neque eum minus! Facere similique facilis dolor vitae adipisci molestias sapiente
eaque temporibus, libero quam, excepturi labore. Ratione deleniti id ut quo magni facilis optio repudiandae, sed. Minima itaque recusandae, doloremque minus sit veniam? Odio nesciunt vero reiciendis soluta possimus aspernatur totam autem magnam
blanditiis eos impedit animi veniam harum saepe aliquam, modi tenetur cum? Esse iusto similique, perspiciatis quod eum voluptatibus doloribus, labore asperiores tempore! Inventore deleniti eum minima nam corporis eius doloribus labore perferendis
a cum, enim molestiae odit cumque qui, distinctio. Ab fuga ipsa nostrum, doloribus aspernatur, quaerat, possimus quis corrupti ducimus ullam officia inventore. Itaque, iure, ut. Enim odit vel cupiditate accusamus aliquid recusandae consequatur
officia nesciunt, beatae nam. Culpa eos ratione aliquid dolorem nostrum minima, tenetur mollitia animi laboriosam at iusto placeat alias, officiis explicabo veniam inventore, doloremque odit. Doloribus et sint dolores. Rem consequuntur sed ratione!</h6>
</div>
</div>
</div>
<div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</div>
</body>
</html>

.container comes first.
Then the .row.
And then columns .col.
Don't ever put a Bootstrap container inside a row.

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008