Looking for a solution where two elements interact differently based on window size. The first element is a container with a width of 1245px, relative position, and centered relatively to the window (with a grey background-opacity of 0.3). The second element is an absolute div (#grey-left), a simple rectangle positioned to the left of the window, with its right point behind the container.
The goal is to ensure that the width of the rectangle where these two elements interact always stays the same, regardless of the window size. Since the container's width is fixed, the #grey-left must adjust its width proportionally to the window width.
Is it feasible using just CSS, without jQuery?
Code:
#grey-left{
height: 420px;
top: 84px;
left: 0px;
position: absolute;
width: ?? ;
}
#container {
position: relative;
margin: 0 auto;
width: 1245px;
}