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

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">
	<footer class="full-bleed" style="background-color: green;">Footer</footer>

See the working example below:


More Blog Articles
  Share   Tweet   Pin   Share   Post   Post   Share   Email