How do I vertically align CSS boxes in HTML?

stealthcamouflougeSA
May 30, 2023
158 views
0 votes
2 Answers

I am trying to align CSS info boxes for a medical practice website at the same heightscreen shot the first two boxes appear fine except for the last one.
i want the boxes to appear align at the same height. i have tried many techniques but none of the seem to get the boxes aligned at the same height.

This is the isolated HTML code together with the css.

.box1 {
  color: #314370;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
}

.box2 {
  color: #314370;
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
}

.box3 {
  color: #314370;
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
}

<center>
  <div class="box1" id="info"><img src="images/clock.png" width="100px"><br><b style="color:#223a66">Working hours:</b><br>
    <p style="color:grey">Mon-Fri 09:00 am-18:00 pm<br> Sat-Sun 10:00 am-17:00 pm<br> Public Holidays 10:00 am-17:00 pm</p>
  </div>
  <div class="box2"><img src="images/s3.png" width="100px"><br><b style="color:#223a66"></b>
    <b>Walk ins are welcome</b><br>
    <p style="color:grey">
      No appointment needed<br> Open seven days a week <br>and 365 days a year
    </p>
  </div>
  <div class="box1"><img src="images/mail.png" width="100px"><br><b>Contact Us:</b><br>
    <p style="color:##223a66;"><b>[email protected]</b></p>
    <p style="color:##223a66;"><b> Call: ---</p>
</b></p>
    <!--<p style="color:grey;">
          Make Enquiries=<br>-->



  </div>
  </div>
</center>

Answers

Flexbox

Flexbox will let you align the items next to each other. However, you will need add flex-wrap: wrap to allow a "linebreak" at screens smaller then 900px width. Otherwise the elements will be squished. You can apart the element from each other by using the gap property. Overall Flexbox has the best support on browsers including deprecated IE. To cenetr the elemnts as intended you can use justify-content: center;:

.box {
  color: #314370;
  border-radius: 25px;
  min-height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
}

section {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em;
}

<section>
  <div class="box" id="info"><img src="images/clock.png" width="100px"><br><b style="color:#223a66">Working hours:</b><br>
    <p style="color:grey">Mon-Fri 09:00 am-18:00 pm<br> Sat-Sun 10:00 am-17:00 pm<br> Public Holidays 10:00 am-17:00 pm</p>
  </div>
  <div class="box"><img src="images/s3.png" width="100px"><br><b style="color:#223a66"></b>
    <b>Walk ins are welcome</b><br>
    <p style="color:grey">
      No appointment needed<br> Open seven days a week <br>and 365 days a year
    </p>
  </div>
  <div class="box"><img src="images/mail.png" width="100px"><br><b>Contact Us:</b><br>
    <p style="color:##223a66;"><b>[email protected]</b></p>
    <p style="color:##223a66;"><b> Call: ---</b></p>
  </div>
</section>

CSS Grid

Unlike Flexbox, Grid allows you to align elements in a tabular-like layout. It is fixed on those cells and do not support certain specifics such as centerign elements such as flexbox. However you could use it to occupy the space as best as possible:

.box {
  color: #314370;
  border-radius: 25px;
  min-height: 300px;
  box-shadow: 0 3px 10px darkgrey;
}

section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr) );
  grid-gap: 1em;
}

<section>
  <div class="box" id="info"><img src="images/clock.png" width="100px"><br><b style="color:#223a66">Working hours:</b><br>
    <p style="color:grey">Mon-Fri 09:00 am-18:00 pm<br> Sat-Sun 10:00 am-17:00 pm<br> Public Holidays 10:00 am-17:00 pm</p>
  </div>
  <div class="box"><img src="images/s3.png" width="100px"><br><b style="color:#223a66"></b>
    <b>Walk ins are welcome</b><br>
    <p style="color:grey">
      No appointment needed<br> Open seven days a week <br>and 365 days a year
    </p>
  </div>
  <div class="box"><img src="images/mail.png" width="100px"><br><b>Contact Us:</b><br>
    <p style="color:##223a66;"><b>[email protected]</b></p>
    <p style="color:##223a66;"><b> Call: ---</b></p>
  </div>
</section>

Sidenote

Your CSS is repetitive. The main advantage of CSS is performance and not needing to repeat code but to reuse code for multiple elements and documents.

In your CSS all the boxes have the exact same styling. As such a common class should be used and the same style applied to all elements. You also should use syntaxes in your case. Instead of declaring every 4 corners with a border-radius of 25px, you could simply address all borders in one call and apply the same bend to it:

.box {
  color: #314370;
  border-radius: 25px;
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
}

That alone would cut your CSS code by more than 70%.

You can get elements which are display-inline to line up in the way you want by adding

vertical-align: top

.box1,
.box2,
.box3 {
  vertical-align: top;
}

.box1 {
  color: #314370;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
}

.box2 {
  color: #314370;
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
}

.box3 {
  color: #314370;
  height: 300px;
  width: 300px;
  box-shadow: 0 3px 10px darkgrey;
  display: inline-block;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-left-radius: 25px;
}

<center>
  <div class="box1" id="info"><img src="images/clock.png" width="100px"><br><b style="color:#223a66">Working hours:</b><br>
    <p style="color:grey">Mon-Fri 09:00 am-18:00 pm<br> Sat-Sun 10:00 am-17:00 pm<br> Public Holidays 10:00 am-17:00 pm</p>
  </div>
  <div class="box2"><img src="images/s3.png" width="100px"><br><b style="color:#223a66"></b>
    <b>Walk ins are welcome</b><br>
    <p style="color:grey">
      No appointment needed<br> Open seven days a week <br>and 365 days a year
    </p>
  </div>
  <div class="box1"><img src="images/mail.png" width="100px"><br><b>Contact Us:</b><br>
    <p style="color:##223a66;"><b>[email protected]</b></p>
    <p style="color:##223a66;"><b> Call: ---</p>
</b></p>
    <!--<p style="color:grey;">
          Make Enquiries=<br>-->



  </div>
  </div>
</center>

Please signup or login to give your own answer.

Click here to cancel reply.