Positioning elements on opposite side using CSS-CodePudding

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 >
  <div id="box1">
    <h3>Box 1</h3>
  </div>

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

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

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

CodePudding user response：

The issue was that the <div> tags were not closed properly. Another thing, you don't need position: absolute to achieve this result when using flexbox. Here is my solution. https://codepen.io/virtuoso/pen/jOZeqXB

CodePudding user response：

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 >
<div id="box1">
  <h3>Box 1</h3>
</div>

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

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

CodePudding user response：

Instead of using positioning, you could use a column and row layout with flex attributes to move align and justify your content wherever you want it. (you can add spacing and margins as needed)

    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      width: 100vw;
      height: 100vh;
    }

    .column {
      display: flex;
      flex-direction: row;
      align-content: flex-start;
      justify-content: right;
      margin: 0;
      width: 100%;
    }

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

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

    .row {
      display: flex;
      flex-direction: column;
      text-align: center;
      margin: 0;
    }

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

    #box4 {
      width: 150px;
      height: 150px;
      background-color: purple;
    }

<body>
  <div >
    <div >
      <div id="box1">
        <h3>Box 1</h3>
      </div>
      <div id="box2">
        <h3>Box 2</h3>
      </div>
    </div>
    <div >
      <div >
        <div id="box3">
          <h3>Box 3</h3>
        </div>
        <div id="box4">
          <h3>Box 4</h3>
        </div>
      </div>
    </div>
  </div>
</body>