Cant figure out how to make left and right block in footer

January 29, 2023

I need the left block to the left side of my footer and the right block to the right side of my footer. But for some reason both are underneath. Any help would be appreciated!

I tried a few things but didnt work and chatgpt wont give me the proper solution.

Below I inserted html and css, maybe someone could help me with this, would be nice.

.mastfoot .inner {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.mastfoot .inner>div {
  width: 25%;
}

.mastfoot .inner>div>a {
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: center;
}

.mastfoot .inner>div>a {
  display: block;
}

.mastfoot .inner>div {
  padding: 10px;
}

.d-flex {
  display: flex;
  flex-direction: column;
}

.btnfooter {
  display: block;
  margin-bottom: 5px;
}

.left-block {
  justify-content: flex-start;
}

.right-block {
  justify-content: flex-end;
}

<footer class="mastfoot mt-auto">
  <div class="inner d-flex justify-content-between">
    <div class="d-flex left-block">
      <div>
        <h4>Left Block</h4>
      </div>
      <div>
        <a class="btn btnfooter btn-outline-danger btn-sm" href="#" target="_blank">.....</a>
        <a class="btn btnfooter btn-outline-danger btn-sm" href="#" target="_blank">.....</a>
        <a class="btn btnfooter btn-outline-danger btn-sm" href="#" target="_blank">.....</a>
        <a class="btn btnfooter btn-outline-danger btn-sm" href="#" target="_blank">.....</a>
      </div>
    </div>
  </div>
  <div class="inner d-flex justify-content-between">
    <div class="d-flex right-block">
      <div>
        <h4>Right Block</h4>
      </div>
      <div>
        <a class="btn btnfooter btn-outline-warning btn-sm" href="#" target="_blank">.....</a>
        <a class="btn btnfooter btn-outline-warning btn-sm" href="#" target="_blank">.....</a>
        <a class="btn btnfooter btn-outline-warning btn-sm" href="#" target="_blank">.....</a>
      </div>
    </div>
  </div>
</footer>

>Solution :

You need to use flex-direction: row and wrap both left and right blocks inside a parent container with justify-content: space-between property to achieve this.

Demo code:

.mastfoot .inner {
 display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}

.mastfoot .inner>div {
  width: 25%;
}

.mastfoot .inner>div>a {
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: center;
}

.mastfoot .inner>div>a {
  display: block;
}

.mastfoot .inner>div {
  padding: 10px;
}

.d-flex {
  display: flex;
  flex-direction: column;
}

.btnfooter {
  display: block;
  margin-bottom: 5px;
}

.left-block {
  justify-content: flex-start;
}

.right-block {
  justify-content: flex-end;
}
.left-block,
.right-block {
  width: 48%;
}

<footer class="mastfoot mt-auto">
  <div class="inner">
    <div class="d-flex left-block">
      <div>
        <h4>Left Block</h4>
      </div>
      <div>
        <a class="btn btnfooter btn-outline-danger btn-sm" href="#" target="_blank">.....</a>
        <a class="btn btnfooter btn-outline-danger btn-sm" href="#" target="_blank">.....</a>
        <a class="btn btnfooter btn-outline-danger btn-sm" href="#" target="_blank">.....</a>
        <a class="btn btnfooter btn-outline-danger btn-sm" href="#" target="_blank">.....</a>
      </div>
    </div>
    <div class="d-flex right-block">
      <div>
        <h4>Right Block</h4>
      </div>
      <div>
        <a class="btn btnfooter btn-outline-warning btn-sm" href="#" target="_blank">.....</a>
        <a class="btn btnfooter btn-outline-warning btn-sm" href="#" target="_blank">.....</a>
        <a class="btn btnfooter btn-outline-warning btn-sm" href="#" target="_blank">.....</a>
        <a class="btn btnfooter btn-outline-warning btn-sm" href="#" target="_blank">.....</a>
      </div>
    </div>
  </div>

I hope that helps