React - Separate colors for different containers

Question

React - Separate colors for different containers

I have been struggling with this issue repeatedly, yet I still haven't found the most efficient solution for it. Imagine having 2 DIVs, A and B, both nested inside a container with columns assigned to each. What would be the optimal way to fill a background color for both DIVs while also occupying the remaining space on the left and right sides of the screen? Essentially, I want the left background color to cover the full width of DIV A plus the remaining unused space on the left (likewise for the right side).

For a clearer visual representation, you can view this image: example illustration

I am aware that using linear-gradient can achieve this effect, but it may pose challenges in different viewport sizes.

I hope my explanation is clear and not overly complicated, and I apologize if it seems trivial.

html css reactjs background-color

Answer 1

Answer №1

Why not add some color to the containers and give the div a transparent look?

<div class="colored-container">
  <div class="transparent-div">
    // Content goes here
  </div>
</div>
<div class="different-colored-container">
  <div class="transparent-div">
    // More content here
  </div>
</div>

Answer 2

Why not add some color to the containers and give the div a transparent look?

<div class="colored-container">
  <div class="transparent-div">
    // Content goes here
  </div>
</div>
<div class="different-colored-container">
  <div class="transparent-div">
    // More content here
  </div>
</div>

Answer 3

Answer №2

Alright, my suggestion for achieving this is to create the following structure:

<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>

This setup consists of a parent DIV with a 50/50 background split. The individual background colors are then defined for each part.

Answer 4

Alright, my suggestion for achieving this is to create the following structure:

<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>

This setup consists of a parent DIV with a 50/50 background split. The individual background colors are then defined for each part.

Answer 5

Answer №3

One approach is to set the entire container to orange and then use a pseudo element after component A to cover the right-hand side of the container with a blue background. This pseudo element can be made taller and wider than necessary to ensure it covers the desired area.

https://i.sstatic.net/vEj39.png

It's important to note that the positioning and sizing of the components in this example are arbitrary and for demonstration purposes only.

<style>body,
.container,
.A,
.B,
.A::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  background: orange;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.A {
  width: 30%;
  height: 30%;
  display: inline-block;
  position: relative;
  top: 10%;
  left: 20%;
  border: solid 1px black;
}

.B {
  width: 20%;
  height: 30%;
  position: absolute;
  display: inline-block;
  left: calc(20% + 30%);
  /* just for demo */
  top: 10%;
  border: solid 1px black;
}

.A::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: -100vh;
  left: 100%;
  width: 100vw;
  height: 200vh;
  background: blue;
}

</style>

<div class="container">
  <div class="A">A</div>
  <div class="B">B</div>
</div>

Answer 6

One approach is to set the entire container to orange and then use a pseudo element after component A to cover the right-hand side of the container with a blue background. This pseudo element can be made taller and wider than necessary to ensure it covers the desired area.

https://i.sstatic.net/vEj39.png

It's important to note that the positioning and sizing of the components in this example are arbitrary and for demonstration purposes only.

<style>body,
.container,
.A,
.B,
.A::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  background: orange;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.A {
  width: 30%;
  height: 30%;
  display: inline-block;
  position: relative;
  top: 10%;
  left: 20%;
  border: solid 1px black;
}

.B {
  width: 20%;
  height: 30%;
  position: absolute;
  display: inline-block;
  left: calc(20% + 30%);
  /* just for demo */
  top: 10%;
  border: solid 1px black;
}

.A::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: -100vh;
  left: 100%;
  width: 100vw;
  height: 200vh;
  background: blue;
}

</style>

<div class="container">
  <div class="A">A</div>
  <div class="B">B</div>
</div>

React - Separate colors for different containers

Answer №1

Answer №2

Answer №3

Similar questions

Tips for Validating Radio Buttons in Angular Reactive Forms and Displaying Error Messages upon Submission

Why is there a CSS reference failure in Express and how can it be resolved?

Solution to trigger CSS :hover to refresh following a transition (such as expanding a menu)

What could be causing the issue with my Material-ui React combo-box not updating properly?

What steps can be taken to avoid a component, generated from an array, being re-rendered every time the array is altered but the key remains unchanged

Implementing image uploads in a React application on a Digital Ocean hosted server

Switching from ejs format to html

I came across a wlwmanifest.xml file while browsing through the source directory of my website

CSS navbar with a unique design: Issue with List Hover not Persisting

Tips for designing a tilted CSS layout from scratch

Enhancing an image with zoom effect in a 2-column layout on hover

I am facing issues with getting create-react-app to function properly on my computer

The custom layout in NestJS version 13 failed to display

Obtain the full HTML code for a Facebook album

Eliminate the table background in a single cell

Rendering a component six times in React

Achieving nested classes in CSS: a comprehensive guide

Implementing React component that clears state upon selecting a place with Google Autocomplete

Tips for populating an array with information gathered from an axios request within a React application

What Happens When You Click on a Link in Google News Using the Mobile Chrome Browser