Responsive div : Side-by-Side div with same height

Question

I am trying to show side-by-side 3 div for responsive, but the content is different from each other. So I tried with below code, But not working for me.

The code is below

https://www.w3schools.com/code/tryit.asp?filename=GTT6H8OFHT3Q

.col-container {
  display: table;
  width: 100%;
}

.col {
  display: table-cell;
  padding: 16px;
}

@media only screen and (max-width: 767px) {
  .col {
    float: none;
    width: 100%;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>


  <h2>Equal Height Columns</h2>
  <p>Make the columns match the height of the tallest column.</p>

  <div class="col-container">
    <div class="col" style="background:orange">
      <h2>Column 1</h2>
      <p>Hello World</p>
    </div>

    <div class="col" style="background:yellow">
      <h2>Column 2</h2>
      <p>Hello World! 1</p>
      <p>Hello World! 2</p>
      <p>Hello World! 3</p>
      <p>Hello World! 4</p>
      <p>Hello World! 5</p>
    </div>

    <div class="col" style="background:orange">
      <h2>Column 3</h2>
      <p>Some other text..</p>
      <p>Some other text..</p>
    </div>
  </div>

</body>

</html>

Looking for the example Link is Paylocity Website.

Can you please suggest to design the same with html code?

Why it does not works for you? What is your output? For me it works perfectly. — MetropolisCZ, Aug 25 '21 at 09:26

Fenton · Accepted Answer · 2021-08-25T09:46:07.337

I have created a super-cut-down version where the only CSS is a simple flex display, which is probably what you want to use as it resolves your height issue.

.col-container {
  display: flex;
}

.col {
  box-sizing: border-box;
  width: 33%;
  margin: 0 16px;
}

<h2>Equal Height Columns</h2>
<p>Make the columns match the height of the tallest column.</p>

<div class="col-container">
  <div class="col" style="background:orange">
    <h2>Column 1</h2>
    <p>Hello World</p>
  </div>

  <div class="col" style="background:yellow">
    <h2>Column 2</h2>
    <p>Hello World! 1</p>
    <p>Hello World! 2</p>
    <p>Hello World! 3</p>
    <p>Hello World! 4</p>
     <p>Hello World! 5</p>
  </div>

  <div class="col" style="background:orange">
    <h2>Column 3</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
  </div>
</div>

Due to the display size of the code widget, I'll pop this in separately...

@media only screen and (max-width: 767px) {
  .col-container {
    display: block;
  }

  .col {
    width: 100%;
  }
}

You can also set `flex-wrap: wrap` on the container to keep it in `display: flex` and have the possibility of making several levels with different col sizes, like Bootstrap. — Simon, Aug 25 '21 at 09:49

score 1 · Answer 2 · answered Aug 25 '21 at 09:42

1

Would adding the following query work for you as below the 352px there is an overflow

  @media only screen and (max-width: 352px){
  .col {
    display: block;
    width: 90%;
  }
}

answered Aug 25 '21 at 09:42

FRANCIS MUTHONI

11
3

You can also avoid using % units of width and try implementing the grid using fraction units for easy responsiveness i.e in our case 1fr 1fr 1fr – FRANCIS MUTHONI Aug 25 '21 at 09:47

Responsive div : Side-by-Side div with same height

2 Answers2