CSS to Force Element Full-Width When Inside a Max-Width Container

If an element like a image is wrapped by a container that has a limited width, how do you make the inner element expand outside the bounds of its container to stretch full-width of the browser window?

I used to think it could only be done with Javascript.  The reason is because there was a WordPress page builder that I used years ago that had a stretch full-width feature which used Javascript to accomplish it.

Well, thanks to the power of modern CSS, we can use calc() and vw solve this problem wonderfully!  Here’s how to do it.

Let’s Visualize the Problem and Solution

In case my intro description didn’t make it crystal clear what I’m talking about.  Here’s the problem we want to solve.

The container, .entry-content , is highlighted in blue below.  You see, here’s it’s showing as limited to a max-width of 910px.

Now, the image block we’re working with, .block-page-photo , is inside of that container.  Normally, it would also be limited to a width of 910px, but you can see here that I’ve been able to stretch it full-width…

How to Stretch Full-Width Using Only CSS

Here’s how I accomplished this.  I have CSS applied to the class name, .align-full , which is actually what WordPress Gutenberg (block editor) uses when you click the Full Width button on a block that supports it.

What the first part does is set both the width and max-width to 100vw.  “vw” is a CSS unit of measurement that is a percentage of the viewport width.  So, 100vw is 100% of the viewport width (aka, the browser window).

The second part uses calc() to calculate half of the width of the container minus half of the viewport width to come up with a negative pixel amount.  That negative pixel amount represents the exact amount of space between the edge of the container and the edge of the screen. Then, I apply that to the left margin.

.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
}

Negative margin is an awesome way to position elements in ways you thought were impossible.  I feel like I’m some kind of hacker when I use it.

Then, combine that with the power of calc(), and you can do some awesome stuff with CSS.

I hope you found this article helpful.  If you did, please leave me a comment down below.

Also, if you have any questions please let me know in the comments as well.  Thanks!

Nathan Kinkead

Blogger, expert WordPress developer, and developer of the awesome bbPress Voting plugin which is a must-have plugin for any bbPress forum.

Download bbPress Voting for free on the WordPress Plugin Directory.