Positioning elements on opposite side using CSS

Issue

While I am able to successfully position the top two boxes (box 1 and 2) at extreme ends using position: relative, if I try to use a flex display underneath it, the second set of boxes (box 3 & 4) will not move to the sides? Why? Same if I use display: flex for all boxes. Also, why is there a space on the sides even when set to 0? Thanks.

https://codepen.io/TheKleyn/pen/LYQgNWr

https://codepen.io/TheKleyn/pen/PoQyNGv

.container {
  top: 0;
  position: relative;
  text-align: center;
}

#box1 {
  position: absolute;
  right: 0;
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: green;
}

#box2 {
  position: absolute;
  left: 0;
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: red;
}

.container2 {
  display: flex;
  width: 50%;
  justify-content: space-between;
}

#box3 {
  left: 0;
  margin-top: 200px;
  width: 150px;
  height: 150px;
  background-color: yellow;
}

#box4 {
  right: 0;
  margin-top: 200px;
  width: 150px;
  height: 150px;
  background-color: purple;
}

here is just flex css----- .container {
  display: flex;
  position: relative;
  text-align: center;
}

#box1 {
  position: absolute;
  right: 20px;
  width: 150px;
  height: 150px;
  background-color: green;
}

#box2 {
  position: absolute;
  left: 0;
  width: 150px;
  height: 150px;
  background-color: red;
}

.container2 {
  display: flex;
  position: relative;
  text-align: center;
  top: 200px;
}

#box3 {
  display: flex;
  position: absolute;
  right: 20px;
  width: 150px;
  height: 150px;
  background-color: yellow;
}

#box4 {
  position: absolute;
  left: 0;
  width: 150px;
  height: 150px;
  background-color: purple;
}
<div class="container">
  <div id="box1">
    <h3>Box 1</h3>
  </div>

  <div id="box2">
    <h3>Box 2</h3>
  </div>
  <div>

    <div class="container2">
      <div id="box3">
        <h3>Box 3</h3>
      </div>

      <div id="box4">
        <h3>Box 4</h3>
      </div>
      <div>

Solution

you are making this way too complicated. First, your div tags are not closed properly. second, stay away from absolute positioning unless it’s absolutely needed. Flex is the simplest and easiest way to do this. Remember, the simpler the code the easier to maintain and scale

.container {
  display: flex; 
  justify-content:space-between;  
}

#box1 {   
  width: 150px;
  height: 150px;  
  background-color: green;
}

#box2 {  
  width: 150px;
  height: 150px;  
  background-color: red;
}

.container2 {  
  display: flex;
  justify-content:space-between;  
}

#box3 {  
  width: 150px;
  height: 150px;
  background-color: yellow;  
}

#box4 { 
  width: 150px;
  height: 150px;
  background-color: purple;  
}
<div class="container">
<div id="box1">
  <h3>Box 1</h3>
</div>

<div id="box2">
  <h3>Box 2</h3>
</div>
</div>
  
<div class="container2">
  <div id="box3">
    <h3>Box 3</h3>
  </div>

  <div id="box4">
    <h3>Box 4</h3>
  </div>
</div>

Answered By – DCR

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.