Ensure all divs have equal heights based on the tallest one, without compromising the responsiveness of the layout

Question

Ensure all divs have equal heights based on the tallest one, without compromising the responsiveness of the layout

I'm facing a challenge with my webpage that consists of multiple divs placed next to each other, each containing an image and text. Due to varying content lengths, the height of these divs ends up being different. Is there a way, without manually setting heights, to make all divs match the height of the tallest one while keeping the layout responsive? I tried using flexbox within a container which worked but disrupted the responsiveness - the divs wouldn't adjust their width based on browser size.

I attempted some jquery solutions found online, but for reasons unknown to me, they didn't work. If anyone has a solution, I'm willing to give it another shot.

The current page layout looks like this:

I encountered issues with the tablet layout not functioning properly without having a separate col-m-1 class. Since I lack experience with responsive design, I relied on W3C tutorials to guide me through this process.

javascript jquery html css

Answer 1

Answer №1

You were on the right track using flex - The missing piece was including flex-wrap in 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>
  ... Remaining code blocks ...
</div>

Above, I have included the container class and eliminated float left from the col class.

Answer 2

You were on the right track using flex - The missing piece was including flex-wrap in 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>
  ... Remaining code blocks ...
</div>

Above, I have included the container class and eliminated float left from the col class.

Ensure all divs have equal heights based on the tallest one, without compromising the responsiveness of the layout

Answer №1

Similar questions

Finding it difficult to grasp the concept of asynchronous functions in NodeJS

A tool for Google Chrome that can retain data until the browser is shut down

CSS-only: Align items in flexbox column with equal width and centered position, without the need for a wrapper

Tips for positioning tables on a page

Updating Vue component property when Vuex store state changes: A step-by-step guide

Can you effectively leverage a prop interface in React Typescript by combining it with another prop?

What is the best way to show or hide a child element when I hover over its parent?

Images stored in a WAR file

Strategies for resolving duplicate jQuery code in my project

Sustain unbroken websocket connection with Discord using Node.js

RequestDispatcher.forward() does not work when servlet is invoked through an Ajax POST request

Refresh the Datatable with the click of a button

Looking to extract the hidden value from an HTML input field using Selenium

Display Title Tag on Hover Effect using jQuery

When accessing the defaultValue property of a select element, it will result in

Switching a class component to a functional component with react hooks (specifically useRef) - tips for preventing the dreaded "undefined" error

Issues arise when a questionnaire is duplicated

Validating HTML Forms Using PHP

Tips for inserting a logo in the center of a QR code using Node.js

Transferring information between different collections in MongoDB using Mongoose can lead to encountering a VersionError