Can equal height boxes be created in HTML & CSS?

Shaakie
May 15, 2023
148 views
0 votes
2 Answers

This is a menu I made using html and css.
As you can see we have 3 boxes. I want all of the boxes to have the same height. I can’t use Flexbox cause the following rule must be applied.
I used 12 grid framework to make the webpage responsive for desktops, tablets, and mobile. The 3 boxes are each specified to take 33.33% of the width when the width of the screen is more than 992px. If the screen width is between 991px and 768px the first two boxes must take 50% of the width and the third box take the whole width of the screen. And if the screen width is less than 767px each box must take 100% of the width.

/* Base style */
* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

body {
  font-family: fantasy, sans-serif;
}

h1 {
  text-align: center;
  margin-bottom: 15px;
  margin-top: 40px;
}

.container {
  position: relative;
  margin: 15px;
}

.row {
  width: 100%;
}

section > div {
  position: relative;
  top: 0px;
  border: 2px solid black;
  background-color: rgb(250, 255, 190);
  margin: 15px;
  padding: 10px;
}

div > p {
  text-align: justify;
  margin-top: 50px;
  font-size: 100%;
}

label {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
  text-align: center;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
}

h3 {
  margin: 15px 0px 15px 0px;
}

#title-1 {
  background-color: #9f7b59;
  color: #fff0dc;
}

#title-2 {
  background-color: #a76e69;
}

#title-3 {
  background-color: #0c1b44;
  color: #8e8c6a;
}
/* Desktop */
@media (min-width: 992px) {
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    float: left;
  }
  .col-lg-1 {
    width: 8.33%;
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33%;
  }
  .col-lg-8 {
    width: 66.66%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 {
    float: left;
  }
  .col-md-1 {
    width: 8.33%;
  }
  .col-md-2 {
    width: 16.66%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.33%;
  }
  .col-md-5 {
    width: 41.66%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.33%;
  }
  .col-md-8 {
    width: 66.66%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-10 {
    width: 83.33%;
  }
  .col-md-11 {
    width: 91.66%;
  }
  .col-md-12 {
    width: 100%;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12 {
    float: left;
  }
  .col-sm-1 {
    width: 8.33%;
  }
  .col-sm-2 {
    width: 16.66%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.33%;
  }
  .col-sm-5 {
    width: 41.66%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.33%;
  }
  .col-sm-8 {
    width: 66.66%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-10 {
    width: 83.33%;
  }
  .col-sm-11 {
    width: 91.66%;
  }
  .col-sm-12 {
    width: 100%;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/styles.css" type="text/css" />
    <title>Coursera Module 2 Assignment</title>
  </head>
  <body>
    <header>
      <h1>Menu!</h1>
    </header>
    <main>
      <div class="container">
        <div class="row">
          <section class="col-lg-4 col-md-6 col-sm-12">
            <div>
              <label id="title-1"><h3>Chicken</h3></label>
              <p>
                Chicken is the most common type of poultry in the world. Owing
                to the relative ease and low cost of raising chickens in
                comparison to mammals such as cattle or hogs chicken meat and
                chicken eggs have become prevalent in numerous cuisines.
              </p>
            </div>
          </section>
          <section class="col-lg-4 col-md-6 col-sm-12">
            <div>
              <label id="title-2"><h3>Beef</h3></label>
              <p>
                Beef is the culinary name for meat from cattle. In prehistoric
                times, humankind hunted aurochs and later domesticated them.
                Since that time, numerous breeds of cattle have been bred
                specifically for the quality or quantity of their meat.
              </p>
            </div>
          </section>
          <section class="col-lg-4 col-md-12 col-sm-12">
            <div>
              <label id="title-3"><h3>Sushi</h3></label>
              <p>
                Sushi is a Japanese dish of prepared vinegared rice, usually
                with some sugar and salt, accompanied by a variety of
                ingredients, such as seafood often raw and vegetables. Styles of
                sushi and its presentation vary widely, but the one key
                ingredient is "sushi rice", also referred to as shari, or
                sumeshi.
              </p>
            </div>
          </section>
        </div>
      </div>
    </main>
  </body>
</html>

I tried using Flexbox, but that makes all boxes show in the same row/column, and the rule defined for responsive web won’t apply anymore.

Answers

The flex layout can’t achieve the same height of multiple lines, so I readjusted it with the grid layout. Thank you @tacoshy for reminding me. I hope this answer can help you.

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

body {
  font-family: fantasy, sans-serif;
}

h1 {
  text-align: center;
  margin-bottom: 15px;
  margin-top: 40px;
}

.container {
  position: relative;
  margin: 15px;
}



section {
  padding: 8px;
}

section > div {
  position: relative;
  top: 0px;
  border: 2px solid black;
  background-color: rgb(250, 255, 190);
  height: 100%;
  padding: 8px;
}

div > p {
  text-align: justify;
  margin-top: 50px;
  font-size: 100%;
}
.item1 {
  grid-area: a;
}

.item2 {
  grid-area: b;
}

.item3 {
  grid-area: c;
}

.row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: 'a b c';
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
  .row {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas: 'a b' 'c c';
  }
}

/* Mobile */
@media (max-width: 767px) {
  .row {
    grid-template-columns: 100%;
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas: 'a' 'b' 'c';
  }
}

label {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
  text-align: center;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
}

h3 {
  margin: 15px 0px 15px 0px;
}

#title-1 {
  background-color: #9f7b59;
  color: #fff0dc;
}

#title-2 {
  background-color: #a76e69;
}

#title-3 {
  background-color: #0c1b44;
  color: #8e8c6a;
}

<header>
      <h1>Menu!</h1>
    </header>
    <main>
      <div class="container">
        <div class="row">
          <section class="item1">
            <div>
              <label id="title-1"><h3>Chicken</h3></label>
              <p>
                Chicken is the most common type of poultry in the world. Owing
                to the relative ease and low cost of raising chickens in
                comparison to mammals such as cattle or hogs chicken meat and
                chicken eggs have become prevalent in numerous cuisines.
              </p>
            </div>
          </section>
          <section class="item2">
            <div>
              <label id="title-2"><h3>Beef</h3></label>
              <p>
                Beef is the culinary name for meat from cattle. In prehistoric
                times, humankind hunted aurochs and later domesticated them.
                Since that time, numerous breeds of cattle have been bred
                specifically for the quality or quantity of their meat.
              </p>
            </div>
          </section>
          <section class="item3">
            <div>
              <label id="title-3"><h3>Sushi</h3></label>
              <p>
                Sushi is a Japanese dish of prepared vinegared rice, usually
                with some sugar and salt, accompanied by a variety of
                ingredients, such as seafood often raw and vegetables. Styles of
                sushi and its presentation vary widely, but the one key
                ingredient is "sushi rice", also referred to as shari, or
                sumeshi.
              </p>
            </div>
          </section>
        </div>
      </div>
    </main>

Use CSS-Grid for that.

If you use grid-auto-rows: 1fr then all rows will have the same height (the height of the tallest row). The number of columns you can define with grid-template-columns which will equally divide the space:

.row { 
  display: grid;
  grid-auto-rows: 1fr;
  gap: 0.5em;
}

@media only screen 
  and (min-width: 768px) {
    .row {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen 
  and (min-width: 992px) {
    .row {
      grid-template-columns: repeat(3, 1fr);
    }
}

<div class="row">
  <section class="col-lg-4 col-md-6 col-sm-12">
    <div>
      <label id="title-1"><h3>Chicken</h3></label>
      <p>
        Chicken is the most common type of poultry in the world. Owing to the relative ease and low cost of raising chickens in comparison to mammals such as cattle or hogs chicken meat and chicken eggs have become prevalent in numerous cuisines.
      </p>
    </div>
  </section>
  <section class="col-lg-4 col-md-6 col-sm-12">
    <div>
      <label id="title-2"><h3>Beef</h3></label>
      <p>
        Beef is the culinary name for meat from cattle. In prehistoric times, humankind hunted aurochs and later domesticated them. Since that time, numerous breeds of cattle have been bred specifically for the quality or quantity of their meat.
      </p>
    </div>
  </section>
  <section class="col-lg-4 col-md-12 col-sm-12">
    <div>
      <label id="title-3"><h3>Sushi</h3></label>
      <p>
        Sushi is a Japanese dish of prepared vinegared rice, usually with some sugar and salt, accompanied by a variety of ingredients, such as seafood often raw and vegetables. Styles of sushi and its presentation vary widely, but the one key ingredient is "sushi
        rice", also referred to as shari, or sumeshi.
      </p>
    </div>
  </section>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.