CSS Quick Tip: Expand Child Div to full width which is inside a container with padding

This is how you make a div take full width as of screen, which is inside container with padding without moving it outside or touching any html

Photo by Rahul Mishra on Unsplash

Consider this UI:

Here we have a .container div with 80px padding and some child contents.

New Requirement Comes:

We have to make banner div (blue box) to take full width as of screen size.

Usual Way

With current HTML structure we can’t achieve this, because we have padding applied in parent container.

In this case we have two ways to do it

1. we take out the banner div outside of the container and with width:100% it will work as per the requirement.

2. use absolute positioning

The Problem:

Generally speaking there is no logical problem with the above approach. But sometimes it becomes complex to move around large piece of html code inside a file, or we want to release a bug asap. In such cases we can prefer below solution.

Better Way

There is a better and clean way to achieve this, we have to use two css properties for this:

1. box-shadow
2. clip-path

box-shadow: 0 0 0 10vmax aqua;
clip-path: inset(0 -10vmax);

Things to take care:
1. use same color as of background-color in box-shadow.
2. play around with inset and shadow values to have creative results.

And that’s it, Now if you get into such situation, you know what to do.