Making a Row of Divs All Be The Same Height Using CSS

How do I keep two side-by-side div elements the same height?

Flexbox

With flexbox it's a single declaration:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

How to make divs have the same height using flexbox properties?

You can use min-height:...

.row {
  display:flex;
}

.col-lg-3 {
  flex: 0 0 auto;
  width: 25%;
}

.cards {
  display: flex;
  width: 100%;
  align-items: stretch;
}

.cards__body {
  background-color: red;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 8px 20px 0px;
  flex: 1;
  min-height:300px;
}

.cards__text {
  color: #333;
  font-size: 17px;
  font-weight: 700;
  padding: 1rem;
  max-width:100%;
}

<section class="bg-bright container-fluid text-center px-4 py-5">
  <div class="row">
    <div class="col-12 col-lg-3">
      <div class="cards">
        <div class="cards__body">
          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzhE83ZD8Aa9uJQhWtZ8EdTB7Wg0NsmHg-7w&usqp=CAU" class="cards__img img-fluid" alt="...">
          <p class="cards__text">Kompleksowa obsługa klienta klienta klienta</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-3">
      <div class="cards">
        <div class="cards__body">
          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzhE83ZD8Aa9uJQhWtZ8EdTB7Wg0NsmHg-7w&usqp=CAU" class="cards__img img-fluid" alt="...">
          <p class="cards__text">Dbałość o najmniejsze detale</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-3">
      <div class="cards">
        <div class="cards__body">
          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzhE83ZD8Aa9uJQhWtZ8EdTB7Wg0NsmHg-7w&usqp=CAU" class="cards__img img-fluid" alt="...">
          <p class="cards__text">Komfort obsługi urządzeń</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-3">
      <div class="cards">
        <div class="cards__body">
          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzhE83ZD8Aa9uJQhWtZ8EdTB7Wg0NsmHg-7w&usqp=CAU" class="cards__img img-fluid" alt="...">
          <p class="cards__text">Funkcjonalność</p>
        </div>
      </div>
    </div>
  </div>
</section>

Is there a CSS only solution to make divs equal height in a vertical grid?

You can use a wrapping flexbox - see how the heights are auto-adjusted (due to the align-items:stretch property which is default) when the child divs wrap as you resize the window.

* {  box-sizing: border-box;}body {  margin: 0;}.wrapper {  display: flex;  flex-flow: row wrap;}.wrapper > div {  border: 1px solid red;}

<div class="wrapper">  <div>    some text here some text here  </div>
  <div>    some text here    <br/>more text here  </div>
  <div>    some text here    <br/>more text here and some more and some more  </div>
  <div>    some text here    <br/>more text here    <br/>more text here  </div>
</div>

How can I make two divs the same height where one of them has to keep a square aspect ratio?

Use this for .image-large and it will be fixed:

&.image-large {
    height: 0;
    padding-bottom: calc(50% - 12px);
  }

And the reason is that column height is decided based on content height or the size of tallest column in the same row. (I mean the visible row that column resides in, not the row tag). Since your col-4 columns have a content with height (which is provided by padding), the other one automatically becomes same as it. In the last row however, the column has no reference height to inherit, and that's why the image inside it can't take more than 50px height which is set as the minimum. What I did is giving the images in large columns a height in a similar manner you gave height to the smaller images. (Extra 12 pixel was there because of 24px gap between columns, that's why I subtracted that)

Make divs on same row the same height - Dynamic Content

Using CSS3 flexbox to make the #container adapt flexible box layout.

Default value of flex-wrap is nowrap so it aligns in a single row. Use flex-wrap: wrap to create multiple rows based on item's width.

Current browser support for Flexbox is pretty good: Can I use Flexbox?

#container {  display: flex;  flex-wrap: wrap; /* Wrap after the items fill the row */    /* Safari specific rules */  display: -webkit-flex;  -webkit-flex-wrap: wrap;}.item {  background: #c4c4c4;  border: 1px solid black;  width: 49%;}

<div id="container">  <div class="item">    Test  </div>  <div class="item">    Hello. Sample    <br>Content    <br>  </div>  <div class="item">    Test    <br>Sample Content  </div>  <div class="item">    Test  </div></div>

Need text at the same height in all the divs

.wrap{  display: flex;  justify-content: center;  align-items: stretch;}.card{    display: flex;    justify-content: center;    flex-direction: column;    width: 400px;    background: gray;    margin: 10px;    padding: 20px;    color: #FFF;}.card-title{    flex: 1;}

<div class="wrap">
    <div class="card">
      <h6 class="card-title customCardTitle">AT0080456789 (Aco)</h6>
      <h1 class="card-subtitle">$ 1,557</h1>
   </div>
   <div class="card">
      <h6 class="card-title customCardTitle">AT0080456789 (Aco) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod      tempor incididunt ut labore et dolore magna aliqua.</h6>
      <h1 class="card-subtitle">$ 2,357</h1>
   </div>
   <div class="card">
      <h6 class="card-title customCardTitle">AT0080456789 (Aco) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua</h6>
      <h1 class="card-subtitle">$ 557,256</h1>
   </div>
</div>

HTML/CSS: Making two floating divs the same height

You can get equal height columns in CSS by applying bottom padding of a large amount, bottom negative margin of the same amount and surrounding the columns with a div that has overflow hidden. Vertically centering the text is a little trickier but this should help you on the way.

#container {
  overflow: hidden;
      width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* Thank you IE */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head></head>

<body>
  <div id="container">
    <div id="left-col">
      <p>Test content</p>
      <p>longer</p>
    </div>
    <div id="right-col">
      <p>Test content</p>
    </div>
  </div>
</body>

---

Related Topics