<div> spanning 2 sections with different backgrounds and container set in each.
I have one
In the image the dashed line (---) is the .container with max-width. Now the issue with this layout is that I want background (gradient and image both) in the first section and white background in the second section. The red box in the design (i.e. the column that spans 2 rows) should adjust it's height if the content of the second section gets longer.
I can easily achieve this layout using CSS Grid but how do I set the background of the first section?
Also if there is any way I can add an element in the first section inside the grid and make it's width equal to the viewport and height equal to the height of the first row of grid + the distance of the grid from the top of the viewport. This might help as well.
Note: I can use JavaScript for this to calculate a few things and get the output but I would prefer CSS only solution first (if there exists one).
I tried positioning the left column element to absolute. By this it is overflowing to the second section but height of the element is not the same as the content of the second section.
Here is the small demo in which I need help. ( https://codepen.io/yashgo30/pen/qBzEMZj )
.container class in my CSS with max-width: 1400px property. Now I have a layout in which there are two different sections with 2 columns and the first column of first section is spanning 2 rows (refer the image).In the image the dashed line (---) is the .container with max-width. Now the issue with this layout is that I want background (gradient and image both) in the first section and white background in the second section. The red box in the design (i.e. the column that spans 2 rows) should adjust it's height if the content of the second section gets longer.
I can easily achieve this layout using CSS Grid but how do I set the background of the first section?
Also if there is any way I can add an element in the first section inside the grid and make it's width equal to the viewport and height equal to the height of the first row of grid + the distance of the grid from the top of the viewport. This might help as well.
Note: I can use JavaScript for this to calculate a few things and get the output but I would prefer CSS only solution first (if there exists one).
I tried positioning the left column element to absolute. By this it is overflowing to the second section but height of the element is not the same as the content of the second section.
Here is the small demo in which I need help. ( https://codepen.io/yashgo30/pen/qBzEMZj )
