March 27, 2024

Use Two Simple Lines of CSS to Make Your Div Full-Bleed

Justin Golden

The Problem

You have a container that nicely wraps the whole page layout, but you have a div and you want it to extend its background color all the way to the edge of the screen (full-bleed), without redoing your entire DOM structure.

The Solution

Two simple lines of CSS, credit to Kevin Powell

.full-bleed {
	margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
}

Now you can apply this to your design like so:

<main class="container">
	<header>Header</header>
	<section>Section</section>
	<footer class="full-bleed" style="background-color: green;">Footer</footer>
</main>

See the working example below: