CSS Trick: extend inner element over edges of container element

Sometimes you need to place an element inside another element (let’s say a div inside a div) and then extend the contained div over the edges of the container div. This needs to be done so that even if the container div has padding and/or margin set, the inner div still will overlap and extend over the container div’s padding and margin.

How to extend a div inside a div over the edges of the container div?

It is fairly simple and CSS provides you all the tools needed to achieve the situation where the inner div extends over the edges of the outer (container) div.

See the expected result on this image – the contained div is extended over the container div:

Extend div over the edges of container div by css
Inner DIV extending over the container DIV by CSS

 

The above sample is visible in this JSfiddle sample that I created – you can see the CSS and HTML all in there.

The logic behind it is pretty simple. Use negative margins to extend the inner div over the container div.

Also note that I added a background color to my sample to the inner div so that the container div borders are not visible.

Here is the CSS code:


#containerDiv {
height: 300px;
width: 40%;
margin: 50px 100px;
padding: 30px;
border: 2px solid red;
}

#innerDiv {
margin-left: -75px; /* extend 75px to the left side */
margin-right: -75px; /* extend 75px to the right side */

height: 100px;
border: 2px solid blue;
background: white;
padding: 20px;
box-shadow: 0 5px 25px rgba(0, 0, 255, 0.2);
}

 

NB! Please note that no width is set for the contained inner div. This means it is automatically 100% to which the negative margins will be added. So the extended ends are added always the fixed size of 75px in our current example.

If for any reason you would need to use a dynamic width to your inner div, you can always use the css calc function to calculate the width of the inner div.

Post Author: Tom Pai