What is the best method to keep content confined within a box inside the grid, while also allowing the box to extend beyond the grid boundaries?

Question

What is the best method to keep content confined within a box inside the grid, while also allowing the box to extend beyond the grid boundaries?

Apologies for the confusing title, but I must confess that I am unsure if there are more appropriate terms to explain what I am attempting to achieve. To provide clarity, I have included an image (as they say, a picture is worth a thousand words)

https://i.stack.imgur.com/y3qxi.png

The goal is to create the cyan box as illustrated in the image. Hopefully, the visual aid clarifies the concept.

RESOLVED

Following Kees van Lierop's solution, I implemented the following code:

&__label {
  @include span-columns(6);
  margin-top: 4rem;
  background-color: rgba($color-secondary, 0.5);
  color: white;
  padding: $base-padding;
  position: relative;

  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 100%;
    width: 9999px;
    height: 100%;
    background-color: inherit;
  }
}

As a result, I achieved the desired outcome:

https://i.stack.imgur.com/iY0He.png

css sass bourbon

Answer 1

Answer №1

To achieve a left positioned cyan background, you can utilize the :before pseudo-element in CSS by incorporating the following code:

.left-cyan {
    position: relative;

    &:before {
        position: absolute;
        top: 0;
        right: 100%;
        width: 10000000px; // set a large width to cover the entire area
        height: 100%;
        content: '';
        display: block;
        background: cyan;
    }
}

Answer 2

To achieve a left positioned cyan background, you can utilize the :before pseudo-element in CSS by incorporating the following code:

.left-cyan {
    position: relative;

    &:before {
        position: absolute;
        top: 0;
        right: 100%;
        width: 10000000px; // set a large width to cover the entire area
        height: 100%;
        content: '';
        display: block;
        background: cyan;
    }
}

What is the best method to keep content confined within a box inside the grid, while also allowing the box to extend beyond the grid boundaries?

Answer №1

Similar questions

Having trouble getting gulp-ruby-sass or gulp-sass to function properly

Looking to personalize the appearance of an iframe using CSS styling?

The submit button is getting disrupted by the background image being set

Creating a visually appealing multi-bar chart in AngularJS: Tips for effectively presenting data

Looking for an API to retrieve random quotes and images from a website?

What is the best way to adjust a map to completely fill the screen?

CssLint detected an unfamiliar property: "fill"

All UL and LI elements are aligned horizontally both before and after

What is causing the initial activation of the <button> within a form?

Explore the functions of jQuery's .css() method and the implementation of

Is there a way to recycle an image and ensure that the web browser only needs to download it once?

Adding a uniform header and footer across all pages simultaneously in HTML

Expansive visuals with the Masonry plugin

Background cutting off right side of HTML website

Transforming a Fixed Bootstrap Site into a Mobile-Friendly Design

Adjusting table font dynamically using Angular and CSS

Tips for resizing the width automatically within a container?

Center an image both vertically and horizontally within an Owl Carousel arrow slider

Java update query experiencing issues

The CSS properties of a div element include the :before pseudo-element with a "shape" style that does