CODEWITHSUNDEEP
javascriptjqueryhtmlcss
chrisjfinlay
chrisjfinlay

Reputation: 82

Set div heights to be the same as tallest, while maintaining responsive layout

I have a very simple page with a series of divs that sit beside each other containing an image and some text. The orientation of the image and the different amount of text means that each div winds up being a different height. Short of manually setting the height, is there a way to make each div match the height of the tallest one, while maintaining responsive layout? I tried wrapping them in a container and using display:flex which did the trick, but it killed the responsive layout - the divs would no longer allow their width to be reset depending on browser size and so the page would not reflow properly.

I found a few jquery examples online but I was unable to get them to work, for reasons unbeknownst to me. I can always try again if someone has a solution.

The basic layout of the page is currently:

@charset "utf-8";

* {
  box-sizing: border-box;
}
[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
  text-align: center;
}
.clear {
  clear: both
}
html {
  font-family: Verdana, Geneva, sans-serif;
}
p {
  font-size: 11px
}
a,
a:hover,
a:active,
a:visited {
  color: #ffffff;
}
a.textlink,
a.textlink:hover,
a.textlink:active,
a.textlink:visited {
  color: #000000;
}
/* For mobile phones: */

[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-m-1 {
    width: 50%;
  }
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {
    width: 20%;
  }
}
img {
  max-width: 100%;
  height: auto;
}
<div class="container">
  <div class="col-1 col-m-1">
    <img src="some/image/path" /><br />
    Some text<br />And more text
  </div>
  <div class="col-1 col-m-1">
    <img src="some/image/path" /><br />
    Some text<br />And more text
  </div>
  <div class="col-1 col-m-1">
    <img src="some/image/path" /><br />
    Some text<br />And more text
  </div>
  <div class="col-1 col-m-1">
    <img src="some/image/path" /><br />
    Some text<br />And more text
  </div>
  <div class="col-1 col-m-1">
    <img src="some/image/path" /><br />
    Some text<br />And more text
  </div>
  <!-- and so on. The divs will, once I have this layout sorted, be
    populated by XML/XSL and could be anywhere from 1 to over 200 of them. -->
</div>

I found that without the separate class col-m-1, the tablet-based layout would not work. (I'm not particularly experienced with responsive layout, so was following W3C tutorials who recommended this way of doing it)

Upvotes: 2

Views: 80

Answers (1)

Pete
Pete

Reputation: 58442

You were on the right path with flex - I think all you missed was adding flex-wrap to your container:

@charset "utf-8";

/* CSS Document */

.container {
  display: flex;
  flex-direction: rows;
  flex-wrap: wrap;
}
* {
  box-sizing: border-box;
}
[class*="col-"] {
  padding: 15px;
  border: 1px solid red;
  text-align: center;
}
.clear {
  clear: both
}
html {
  font-family: Verdana, Geneva, sans-serif;
}
p {
  font-size: 11px
}
a,
a:hover,
a:active,
a:visited {
  color: #ffffff;
}
a.textlink,
a.textlink:hover,
a.textlink:active,
a.textlink:visited {
  color: #000000;
}
/* For mobile phones: */

[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-m-1 {
    width: 50%;
  }
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {
    width: 20%;
  }
}
img {
  max-width: 100%;
  height: auto;
}
<div class="container">
  <div class="col-1 col-m-1">
    <img src="some/image/path" />
    <br />Some text
    <br />And more text
    <br />And more text</div>
  <div class="col-1 col-m-1">
    <img src="some/image/path" />
    <br />Some text
    <br />And more text</div>
  <div class="col-1 col-m-1">
    <img src="some/image/path" />
    <br />Some text
    <br />And more text</div>
  <div class="col-1 col-m-1">
    <img src="some/image/path" />
    <br />Some text
    <br />And more text</div>
  <div class="col-1 col-m-1">
    <img src="some/image/path" />
    <br />Some text
    <br />And more text</div>
  <div class="col-1 col-m-1">
    <img src="some/image/path" />
    <br />Some text
    <br />And more text
    <br />And more text</div>
  <div class="col-1 col-m-1">
    <img src="some/image/path" />
    <br />Some text
    <br />And more text</div>
  <div class="col-1 col-m-1">
    <img src="some/image/path" />
    <br />Some text
    <br />And more text</div>
  <div class="col-1 col-m-1">
    <img src="some/image/path" />
    <br />Some text
    <br />And more text</div>
  <div class="col-1 col-m-1">
    <img src="some/image/path" />
    <br />Some text
    <br />And more text</div>
</div>

I have added the container class above and removed float left from the col class

Upvotes: 3

Related Questions