Search code examples
htmlcssreactjsbackground-color

REACT - Divide background-color with containers

I've been facing this issue over and over again and till this day I wasn't able to find the most optimized solution for it.

Let's say I have 2 DIVs, A and B. Both DIVs are inside a container and have a set of columns assigned to each. What would be the best way to fill a background color for both DIVs AND it would occupy the remaining left and right sides of the screen? With this I mean, the left background color would occupy full left DIV's width + remaining left width not used by the element. (same for right side)

Here's an image for better illustration: imagine example

I know that by using linear-gradient we can split the background but in lower/higher viewports, it can become tricky.

I hope it won't be too confusing to understand and I apologize if it's too stupid.

Solution

  • Ok, I think the best way to do this is by having the following:

        <div style="background: linear-gradient(90deg, #8A66B9 50%, #ffff 50%);">
      <div class="container">
        <div class="row">
          <div class="col-7" style="background-color:#8A66B9">
            A
          </div>
          <div class="col-5" style="background-color:#ffff">
            B
          </div>
        </div>
      </div>
    </div>

    Thus, I have a parent DIV which has the background 50/50. Then, I set the background color for each of the backgrounds.