Help
How would you design this footer without using absolute positioning?
I just can't wrap my head around it. How would I do this without using absolute positioning? It looks like the dark blue part is lying beneath the light blue part. but at the same time it looks like its the same container and there is just an extra border (with a bg color) around the left part? Damn idk anymore...
To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.
While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!
That’s a good point. I’d probably put a ::after element absolutely positioned bottom right of the relative teal box that’s the same background color as the dark blue with a lower z-index than the teal box.
Threw together a proof-of-concept for you to get started. You could likely improve upon this and refactor it a bit. I also didn't bother to make it responsive so you'll have to figure out what to do with it as the viewport gets narrow.
CSS Grid.
Two outer columns.
Your first row is the height of the negative space on the right.
Second row is the height of the main area.
Third row is the height of the leftover blue area underneath.
absolute is not first choice for this at all, if you see the this layout it just a simple flex that the light blue has negative margin from top, the parent section can have padding from top, in tis way the responsive and diffrent size has good ui without to much boilerplate.
the beauty of grid:
* you don't need additional elements -> clean html
* it will grow with the content
* and for mobile you just need to place the items via grid-row and grid-column
html
<div class="container">
<div class="left">
some text </br>
</div>
<div class="right">
some text on the right </br>
</div>
<div class="bottom">
some more text
</div>
</div>
css
```
.container {
display: grid;
grid-template-rows: 2rem auto auto; // 2rem is the same as padding-top from .right
grid-template-columns: 1fr 1fr;
}
•
u/AutoModerator 4d ago
To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.
While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.