I'm in the process of setting up a blog page on my website with a design that includes two columns. The first column, known as .col_1, is fixed in width and is showcased in red. The second column, represented by .col_2, occupies the remaining space and is displayed in blue. Within Column 2, there is a rich text block called .rich_text, highlighted in green, where all blog headings, text, and content are contained within a specific maximum width.
I am aiming to have all tables within the .rich_text block extend beyond its borders and reach the edges of .page_body, consequently spanning the entire width of .page_body. I previously utilized
position: absolute; left: 0px; right: 0px;.table_container_abs to achieve this effect; however, this positioning caused the table to overlap other content in the .rich_text block.
Take a look at the live example of my webpage layout embedded below. Now, my question is: How can I widen these tables to touch the borders of .page_body without the use of JavaScript, while also maintaining proper interaction with the elements in the rich text block?
.page_body {
width: 100%;
display: flex;
position: relative
}
.col_1 {
width: 100px;
flex-grow: 1;
background-color: #FFC9C9
}
.col_2 {
flex-grow: 3;
background-color: #C9DEFF
}
.rich_text {
max-width: 300px;
background-color: #F0FFFA
}
.table_container {
width: 100%;
height: 100px;
color: white;
background-color: #656565
}
.table_container_abs {
left: 0px;
right: 0px;
position: absolute;
height: 100px;
color: white;
background-color: #656565
}<div class='page_body'>
<div class='col_1'>Post navigation</div>
<div class='col_2'>
<div class='rich_text'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
<div class='table_container'>Table</div>
<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<br>
<div class='table_container_abs'>Absolute table</div>
</div>
</div>
</div>