Breaking Out of Parent Element with CSS

Introduction

Often times when developing CSS for a WordPress child theme or just when working with someone elses stylesheets in general, it can be desirable to “breakout” of the parent element and draw a full width element that stretches the entire width of the page.

This can be achieved with the following code:

HTML

1
2
3
4
5
<div class='parent'>
	<div class='break-out'>
		Breakout Content
	</div>
</div>

CSS

1
2
3
4
5
6
.parent{
	max-width:50vw;
	margin:0 auto;
}
/*The Actual Magic*/
.break-out { margin: 0 calc(50% - 50vw) }

If you’re dealing with some particularly stubborn CSS you might need to do something like this:

1
2
3
4
.break-out { 
    margin: 0 calc(50% - 50vw)!important;
    max-width:100vw!important; 
}