Looking to design a two-column layout where the left column takes up 40% of the container and aligns with it, while the right column expands all the way to the window edge. I managed to achieve this using position:absolute, but I'm curious if there's a better method out there. Check out the image and code snippet below. Any suggestions on improving this setup?
https://i.stack.imgur.com/CPWi1.png
div {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: arial;
}
.header {
padding: 20px 10px;
background: #EEE;
}
.container {
max-width: 1000px;
margin: auto;
display: flex;
gap: 0;
position: relative;
}
.container.wide {
width: 100%;
max-width: unset;
}
.relativediv {
position: relative;
}
.absolute-container {
width: 100%;
max-width: 1000px;
padding: 20px 10px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.container.wide :nth-child(1) {
width: 40%;
}
.container.wide :nth-child(2) {
width: 60%;
min-height: 500px;
}
.container.wide :nth-child(2) img {
height: 100%;
width: 100%;
object-fit: cover;
display: block;
}<div class="container header">
Header
</div>
<div class="relativediv">
<div class="container wide">
<div></div>
<div>
<img src="https://i.picsum.photos/id/0/5616/3744.jpg?hmac=3GAAioiQziMGEtLbfrdbcoenXoWAW-zlyEAMkfEdBzQ" />
</div>
</div>
<div class="absolute-container">
<div class="content">
<p>Lorem ipsum dolar sit smit is dummy text. </p>
<p>Lorem ipsum dolar sit smit is dummy text. </p>
<p>Lorem ipsum dolar sit smit is dummy text. </p>
<p>Lorem ipsum dolar sit smit is dummy text. </p>
<p>Lorem ipsum dolar sit smit is dummy text. </p>
</div>
</div>
</div>