WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

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 its ‘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 a 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 you are using a site that is built with the direction; right-to-left (rtl), 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 and various other CMS frameworks. If you need responsive design, SEO, speed optimisation or anything else in the world of digital, you can contact Silva Web Designs here; [email protected]

It’s good to share

Join the discussion