how to to "align justified" 3 responsive horizontal DIVs?

Question

For a small project, I have created 3 horizontally buttons in a responsive way. So at wide screens, the buttons are displayed horizontally, next to each other. And at smaller displays, the buttons are nicely displayed below each other in 1 column.

The code is the following:

<style>
.row:after { 
  clear: both; 
}
.row:before, .row:after {
  content: " ";
  display: table; 
}   
@media (min-width: 900px) {
.col { 
  float: left;
  width: 27%; 
}
.button {
  font-family: verdana;
  font-weight: bold;
  color: #FFFFFF;
  font-size: 0.75vw;
  padding: 8px 16px;
  -moz-border-radius: 45px;
  -webkit-border-radius: 45px;
  border-radius: 45px;
  border: 4px solid #BED3EC;
  background: #306BBB;
  text-decoration: none;
  margin-top: 10px;
  margin-bottom: 30px;
}
.button:hover {
  background: #458500;
 color: #FFFFFF !important;
  border: 4px solid #AFD283;
  text-decoration: none;
}
.buttons {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
 font-weight:bold;
  color: #FFFFFF;
}
}
@media (max-width: 900px) {
.col { 
  width: 40%;
  margin: 0 auto;
}
.button {
  font-family: verdana;
  font-weight: bold;
  color: #FFFFFF;
  font-size: 2.5vw;
  padding: 8px 16px;
  -moz-border-radius: 45px;
  -webkit-border-radius: 45px;
  border-radius: 45px;
  border: 4px solid #BED3EC;
  background: #306BBB;
  text-decoration: none;
  margin-top: 10px;
}
.button:hover {
  background: #458500;
  border: 4px solid #AFD283;
  text-decoration: none;
}
.buttons {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-bottom: 30px;
  font-weight:bold;
  color: #FFFFFF;
}
}
</style>

<div class="row">
<div class="buttons col" >Initiated by<br><a href="https://www.demeesterzoeterwoude.nl/" class="button"> Yvonne en Winy van der Geest </a></div>
<div class="buttons col" id="button2" >Loved by<br><a href="https://golden-earring.nl/" class="button"> all the Golden Earring fans </a></div>
<div class="buttons col" >Powered by<br><a href="https://www.perspectum.nl/" class="button"> perspectum.nl </a></div>
</div>

A codepen can be found here ...

I am happy with the responsive behavior at small screens. But I would like to have the horizontally displayed divs to be "justified" across the whole screen, so: -- the first div is displayed fully to the left; -- the second div is displayed in the center; -- and the third div is displayed fully to the right. Ofcourse the responsive behavior at small screens should remain.

Would highly appreciate some suggestions how to solve.

Answer 1

Is this what you try to do ?

.row {
  text-align:justify;
  text-align-last:justify;
}
.col{
  text-align:center;
  text-align-last:center;
  display:inline-block; 
}

.button {
  display:block;
  font-family: verdana;
  font-weight: bold;
  color: #FFFFFF;
  font-size: calc(8px + 0.25vw) ;
  padding: 8px 16px;
  border-radius: 45px;
  border: 4px solid #BED3EC;
  background: #306BBB;
  text-decoration: none; 
}

<div class="row">
  <div class=" col">Initiated by<br><a href="https://www.demeesterzoeterwoude.nl/" class="button"> brother & sister of a family never heard of</a></div>
  <div class=" col" id="button2">Loved by<br><a href="https://golden-earring.nl/" class="button"> all the Golden Earring fans </a></div>
  <div class=" col">Powered by<br><a href="https://www.perspectum.nl/" class="button"> perspectum.nl </a></div>
</div>

if yes, inline-block instead float is to be used ... but nowdays, flex is there to make it easy.

.row {display:flex;
  justify-content:space-between;
}
.col{
  text-align:center; 
}

.button {
  display:block;
  font-family: verdana;
  font-weight: bold;
  color: #FFFFFF;
  font-size: calc(8px + 0.25vw);/* keep a min size */
  padding: 8px 16px;
  border-radius: 45px;
  border: 4px solid #BED3EC;
  background: #306BBB;
  text-decoration: none; 
}

<div class="row">
  <div class=" col">Initiated by<br><a href="https://www.demeesterzoeterwoude.nl/" class="button"> brother & sister of a family never heard of</a></div>
  <div class=" col" id="button2">Loved by<br><a href="https://golden-earring.nl/" class="button"> all the Golden Earring fans </a></div>
  <div class=" col">Powered by<br><a href="https://www.perspectum.nl/" class="button"> perspectum.nl </a></div>
</div>

Finally, a mediaquerie will be needed to reset the layout display

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

.row:before,
.row:after {
  content: '';
  flex: 0.5;
}

.col {
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.col:nth-child(1) {
  order: -1
}

.col:nth-child(3) {
  order: 1;
}

@media screen and (max-width:700px) {
  .row {
    flex-direction: column;
    max-width: max-content;
    margin: auto;
  }
}

.button {
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: verdana;
  font-weight: bold;
  color: #ffffff;
  font-size: calc(8px + 0.5vw);
  padding: 8px 16px;
  border-radius: 45px;
  border: 4px solid #bed3ec;
  background: #306bbb;
  text-decoration: none;
}

<div class="row">
  <div class=" col">Initiated by<br><a href="https://www.demeesterzoeterwoude.nl/" class="button"> brother & sister of a family never heard of</a></div>
  <div class=" col" id="button2">Loved by<br><a href="https://golden-earring.nl/" class="button"> all the Golden Earring fans </a></div>
  <div class=" col">Powered by<br><a href="https://www.perspectum.nl/" class="button"> perspectum.nl </a></div>
</div>

Answer 2

Display : column is not the solution for your problem when you have to put your items horizontally, you have to use display:flex for your container row and flex-basis: 20% for your items to add some margin around your items:

@media (min-width: 900px) {
.col { 
  float: left;
  width: 20%; 
}
  .row {
     display:flex;
    justify-content:space-between;
  }
.button {
  font-family: verdana;
  font-weight: bold;
  color: #FFFFFF;
  font-size: 0.75vw;
  padding: 8px 16px;
  -moz-border-radius: 45px;
  -webkit-border-radius: 45px;
  border-radius: 45px;
  border: 4px solid #BED3EC;
  background: #306BBB;
  text-decoration: none;
  margin-top: 10px;
  margin-bottom: 30px;
}
.button:hover {
  background: #458500;
 color: #FFFFFF !important;
  border: 4px solid #AFD283;
  text-decoration: none;
}

.buttons {
  flex-basis: 20%;
  display: flex;
  flex-direction: column;
  text-align: center;
 font-weight:bold;
  color: #FFFFFF;
}
}

https://codepen.io/boutahlilsoufiane/pen/JjbrGeo

Answer 3

Try this:

@media (min-width: 900px) {

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