Attempting to construct a text-based webpage entirely with HTML and CSS, the objective is to divide the page into two columns. The first column should occupy 2/3 of the width to accommodate the primary text, while the second column should take up the remaining 1/3 to add supplementary details.
I have been experimenting with the following 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">
<!-- Insert your important text here -->
</p>
</div>
</div>
<div class="col">
<div class="col-inner">
<p class="p-4">
<!-- Insert your additional details here -->
</p>
</div>
</div>
</div>
</div>
</div>
However, I am having trouble implementing it effectively!