Expanding a div beyond its container to be full width of page

Sometimes its necessary to break a div out of its container and make it full width of the page which luckily we can do using a bit of CSS trickery!

An example of this for us is where a plugin shortcode was inserted within the WYSIWIG editor which was within a container div and we wanted this element to be full width of the page.

How we did it…

Firstly, as we are manipulating the div full width we need to add the following to the top of our main stylesheet:

html,
body {
	overflow-x: hidden;
}

The next step is add some css for the div that we want extend full width:

.fullwidth { /* Update this to your div name */
     width: 500%;
     margin-left: -200%; 
}

To explain what is happening here, we are making the div 500% width which makes it five times bigger than the content area and full width on most screens depending on the size of the div container. The margin left of -200% is then set to make it centered again.

The -200% in our example is actually a calculation of (width – 100%) / 2

So if you made the width 300% then the margin left would be (300% – 100% = 200%) / 2 = -100% (be sure that it is a negative margin).

There it is, a simple method to break a div out of its container which works cross browser.

Any questions then please leave a comment