CODEWITHSUNDEEP
cssreactjs
Perplexityy
Perplexityy

Reputation: 569

React: Relative positioning of two divs within div

I have a container div, containing two other divs. I want two divs in the container to be 10% from the left and 10% from the right of the container div, respectively. But, only the left one does what I want, and the right one doesn't. Why is this happening?

App.js

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

class App extends React.Component {
  render() {
    return (
      <div className="screenDiv">
        <div className="topContainer" />
        <div className="botContainer">
          <div className="LeftDiv" />
          <div className="RightDiv" />
        </div>
      </div>
    );
  }
}

export default App;

App.css

.screenDiv {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.topContainer {
  width: 100%;
  height: 80%;
  background-color: #c6e2f4;
}

.botContainer {
  width: 100%;
  height: 20%;
  background-color: #f9aff9;
}

.LeftDiv {
  width: 5%;
  height: 20%;
  position: relative;
  top: 50%;
  left: 10%;
  background-color: green;
}

.RightDiv {
  width: 5%;
  height: 20%;
  position: relative;
  top: 50%;
  right: 10%;
  background-color: #ff0000;
}

Upvotes: 0

Views: 920

Answers (1)

Abhisar Tripathi
Abhisar Tripathi

Reputation: 1659

We can use flexbox for this. We just need to modify this class in your css and rest will work properly -: 

.botContainer {
  width: 100%;
  height: 20%;
  background-color: #f9aff9;
  display: flex;
  justify-content: space-between;
}

here is a working demo -> https://stackblitz.com/edit/react-kuusz8

Upvotes: 1

Related Questions