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.

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.

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

The scaling transformation is not accurate for uneven pixel widths

Show basic HTML elements on a single page of an Angular Material web application

The order of event handlers in jQuery

Is it possible to set the input form to be read-only?

Problem with icon color not being applied to lightning-tab component in LWC

Manipulating jQuery Element Values

Processing an HTML form submission with the help of PHP and AJAX

Decrease in internal width

The placeholder string is being accepted as the input value for the number

Steps to turn off see-through selection in Material-UI

Utilize a DIV element to apply a class to CKEditor

Chat box custom scrollbar always positioned at the bottom

The NodeJS server encountered an issue while trying to load the XMLHttpRequest from the localhost. The specified link type of

What strategies can be utilized to raise the max-height from the bottom to the top?

What is the process for implementing the Google Analytics tag on a Streamlit-built website?

Encountering an error message stating "The variable 'App' is declared but not used" when running the index.tsx function

When the user clicks on an element, my JavaScript code dynamically updates the CSS property by changing the window

There appears to be an issue with the functionality of the Bootstrap toggle tab

When consecutive DOM elements are hidden, a message saying "Hiding N elements" will be displayed

tips for implementing Material-UI's grid system