Full Width Containers in Limited Width Parents

How do we make a full browser width container when we’re inside a limited-width parent? In other words, how do we stretch the div outside of it’s ‘container’.

If we could use absolute positioning, we could set the container to be at left: 0; and width: 100%; – but we can’t because we want the container to remain inflow.

In my opinion, the best way to get around this situation is as follows:-


.full-width {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

The idea behind this technique is that we push the container to the exact middle of the browser window with left: 50%;, then we pull it back to the left edge with negative -50vw margin.

This way you don’t need any information about the parent width at all. Do note that both this and the calc() version require the parent to be exactly centred in the browser.

So why bother with the right and margin-right? To be honest, you don’t really need it on a left-to-right site, but if there is any chance of direction: rtl; happening, you’ll need the right properties, so having both is more bulletproof.

So start getting your div’s stretched outside your containers! If this has helped you, leave a comment!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share