Boxes are not the same size

Question

I am trying to recreate a website in code to see if I still remember HTML and CSS but I got stuck on a certain spot. When I tried to make a three-column block I noticed that the first block on the left is not the same height as the other two.

I would like the bottom blocks to look like the three top ones.

My HTML code looks like

#tabThree {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
  text-align: center;
}
.reviews {
  position: relative;
  text-align: center;
  color: blackl;
  padding: 30px;
  width: 100%;
}

.review_boxes {
  font-size: 20px;
  list-style: none;
  display: inline-block;
  padding: 0px 30px;
  margin: 10px;
  background-color: white;
  border: 2px solid lightgrey;
  width: 25%;
  text-align: center;
}

<div class="reviews">
    <h1>Customer Reviews</h1>
      <ul id="tabThree">

        <li class="review_boxes">
          <h1>C.F., Mardela Springs</h1>
          <p>"Very easy to work with and worked quickly
            and efficiently"</p>
        </li>

        <li class="review_boxes">
          <h1>Bruce Mear</h1>
          <p>"G and Brothers Roofing does work for my company. Bruce Mears, Designer/Builder. I highly recommend them!!!"</p>
        </li>

        <li class="review_boxes">
          <h1>Michele Orlen</h1>
          <p>"Great work and very efficient - on top of them job - would highly recommend!!"</p>
        </li>
      </ul>
  </div>

I have tried setting the height for the blocks but I might also be doing something wrong that I do not clearly see.

score 0 · Answer 1 · answered Jun 22 '20 at 18:50

0

The first one is less in height because the <p> tag only contains a single line of text. So you can either

1. set an absolute height for the containers.
2. wrap the <h1>s and <p>s in containers as well and set heights for these containers.

answered Jun 22 '20 at 18:50

JSRB

2,492
1
17
48

score 0 · Answer 2 · answered Jun 22 '20 at 18:53

0

Add display: flex; to your id #tabThree .

answered Jun 22 '20 at 18:53

Ahmed Tag Amer

1,381
1
8
21

I've tried it but it uncenters everything. – TheRealPines Jun 23 '20 at 16:28

score 0 · Answer 3 · answered Jun 22 '20 at 19:01

Hmm this is really weird... every time I make things like this I use a css grid :P its probably not the best choice but it works really well for me

<div class="reviews">
<h1>Customer Reviews</h1>
  <section class="grid">

    <div class="review_boxes">
      <h1>C.F., Mardela Springs</h1>
      <p>"Very easy to work with and worked quickly
        and efficiently"</p>
    </div>

    <div class="review_boxes">
      <h1>Bruce Mear</h1>
      <p>"G and Brothers Roofing does work for my company. Bruce Mears, Designer/Builder. I highly recommend them!!!"</p>
    </div>

    <div class="review_boxes">
      <h1>Michele Orlen</h1>
      <p>"Great work and very efficient - on top of them job - would highly recommend!!"</p>
    </div>
  </section>

<style>
.reviews {
  position: relative;
  text-align: center;
  color: blackl;
  padding: 30px;
  width: 100%;
}

.review_boxes {
  font-size: 20px;
  list-style: none;
  display: inline-block;
  padding: 0px 30px;
  margin: 10px;
  background-color: white;
  border: 2px solid lightgrey;
  width: 80%;
  text-align: center;
}
.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
</style>

score -1 · Answer 4 · answered Jun 22 '20 at 18:54

-1

You could also just add an empty <p> to the first box to get the extra line. That would make the boxes all the same height, but It wouldn't be that clean.

answered Jun 22 '20 at 18:54

Neo Mohr

7
2

HTML will ignore that `

` if there is nothing inside. – TheRealPines Jun 23 '20 at 16:28

Boxes are not the same size

4 Answers4