3 DIV boxes aligned in a single row

<div>
  <div style="width:60px; height:22px; float:left;">
    BOX 1
  </div>

  <div style="width:100px; height:22px; float:left;">
    BOX 2
  </div>

  <div style="width:60px; height:22px; float:left;">
    BOX 3
  </div>
</div>
<div style="clear:both;"></div>

Center align the group of boxes

<div class="MyButtonsContainer">
  <div class="MyButton">
    BOX 1
  </div>

  <div class="MyButton">
    BOX 2
  </div>

  <div class="MyButton">
    BOX 3
  </div>
</div>
<div style="clear:both;"></div>


.MyButtonsContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.MyButton {
  display:inline-block;
  width:60px;
  height:22px;
  float:left;
}
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.

Comments

Your email address will not be published. Required fields are marked *