How to make a column extend beyond the grid
How can I make the column taller than the grid, like the photo? Screenshot from here https://www.csszengarden.com/221/
6 Replies
Have you tried with a pseudo element :after on the div ? If you don’t need the text to extend outside the white area, but just a decorative blue rectangle, it might work.
Position:absolute on the pseudo element, position:relative on the element itself. Top, left, right at 0 on the pseudo element, and bottom at something like -30px ?
you could also do it with a negative margin bottom on that blue element
Thanks. This worked. I didn't know about negative margins.
I tried here https://codepen.io/ksblupzi-the-solid/pen/bNEevWK but it doesn't work.
There is a typo, it should be .col-2:after (you forgot the .)
Also, for the pseudo element to appear, add
content: '' in its properties.like this : https://codepen.io/Uurshin/pen/ogbLypK
One of the drawback of a negative margin-bottom here is that the content inside will go beyond the limit (for example if you have a big chunk of text). If you want to use a negative margin, you can add the exact amount of padding-bottom you've added as margin-bottom (let's say
margin-bottom: -30px; padding-bottom: 30px ) to ensure nothing goes past the horizontal limit of the blue rectangle.
If we solved your problem, don't forget to edit the original post and add the "solved" tag. 🙂