RGB logo

RGB Studios.org

A web development company

March 27, 2024

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

Justin Golden

webdev
css
Photo credit @gabriel_meinert on Unsplash

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:

Header
Section
Footer

More Blog Articles
  Share   Tweet   Pin   Share   Post   Post   Share   Email