CODEWITHSUNDEEP
htmlcsscss-position
TheKleyn
TheKleyn

Reputation: 29

Positioning elements on opposite side using CSS

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>

Upvotes: 0

Views: 1526

Answers (3)

DCR
DCR

Reputation: 15700

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>

Upvotes: 2

Andi
Andi

Reputation: 3002

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 class="column">
    <div class="row">
      <div id="box1">
        <h3>Box 1</h3>
      </div>
      <div id="box2">
        <h3>Box 2</h3>
      </div>
    </div>
    <div class="column">
      <div class="row">
        <div id="box3">
          <h3>Box 3</h3>
        </div>
        <div id="box4">
          <h3>Box 4</h3>
        </div>
      </div>
    </div>
  </div>
</body>

Upvotes: 1

Mr. X
Mr. X

Reputation: 897

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

Upvotes: 2

Related Questions