March 27, 2024
Use Two Simple Lines of CSS to Make Your Div Full-Bleed
Justin Golden
webdev
css
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