<div> spanning 2 sections with different backgrounds and container set in each.
I have one
.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 )
6 Replies
Since you're using grid, the easiest way to do it is not use a container, and use a pseudo-element for the background, that way it can always follow the height of the smaller sidebar thing: https://codepen.io/kevinpowell/pen/XWLJQyg
One thing to note as well, in your example, you had multiple
<main> and <h1>. It might have been a quick codepen for an example, but just want to mention only one of those per page 🙂
As I said, I used grid to replace the .container.
The way that works is using minmax(1rem, 1fr) for the left and right side to create the spacing on the sides.
Then, since you have two columns in your layout, you can use minmax(0, Xpx), for each of those columns. You'll want the Xpx for the two of them to add up to your total container width. I used 400 for both, so the max-width of my "container" would be 800px, for example.First of all thank you for replying and sorry I didn't notice it earlier 😅 .
Just after posting this issue here, I referred to your video [https://youtu.be/c13gpBrnGEw] which I saw earlier. I tried to implement something similar and it worked.
Kevin Powell
YouTube
A new approach to container and wrapper classes
The wrapper or container is probably the most common design pattern around, but after coming across an article by Stephanie Eckles looking at how we can use a grid to emulate a container, and have simple breakouts — https://smolcss.dev/#smol-breakout-grid — I had an idea of how we could do this to completely drop the idea of containers, and then...
Also, this might not be the best place to ask but I just wanted to know if I have multiple
<section> elements in my markup then can I use <main> elements inside it or there should be only one in whole page? I understand that <h1> can be used only once as a page title.I must admit that I was also under the miss-conception that you could have multiple <main> tags within a document, much like you can with <header> and <footer> (each within their own section).
However, after reading Kevins reply I have had to reconsider this and now realize that I was wrong.
According to the spec:
https://html.spec.whatwg.org/multipage/grouping-content.html#the-main-element
The main element represents the dominant contents of the document. A document must not have more than one main element that does not have the hidden attribute specified.
Yeah, like Chris said, one main per page
Thanks. I also read the same that day 😅