How to have two sub-divs the same height as each other

Question

I need to make two .tinted-containers the same height as each other (using CSS if possible) but each one is under a grid column.

I can't tint the grid columns because they use padding to create the gutters and I'd have no white space between the tinted containers if I tint the background.
It's a %-based grid so adding a margin to both columns takes the width to over 100%.

<div class="grid-row">
      <div class="grid-column-half">
        <div class="tinted-container">
          <p>Taller</p>
          <p>column</p>
          <p>on</p>
          <p>left</p>
        </div>
      </div>

      <div class="grid-column-half">
        <div class="tinted-container">
          <p>This container should be the same height as the other one.</p>
        </div>
      </div>
    </div>

How can I make the containers the same height?

the flex model could be used here . do you use a css framework or are you using your own rules/class ? (we are missing the CSS you used/tried) — G-Cyrillus, Sep 08 '16 at 12:49

score 1 · Accepted Answer · answered Sep 08 '16 at 13:31

Flexbox can do that:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.grid-row {
  display: flex;
}
.grid-column-half {
  border: 1px solid grey;
  width: 50%;
  padding: 10px
}
.tinted-container {
  height: 100%;
  background: pink;
}

<div class="grid-row">
  <div class="grid-column-half">
    <div class="tinted-container">
      <p>Taller</p>
      <p>column</p>
      <p>on</p>
      <p>left</p>
    </div>
  </div>

  <div class="grid-column-half">
    <div class="tinted-container">
      <p>This container should be the same height as the other one.</p>
    </div>
  </div>
</div>

score -1 · Answer 2 · answered Sep 08 '16 at 12:49

You will need to set heights of the div elements to get them to the same size.

The reason you need to do this is because the divs are not all set as one specific height or width, it depends on what is contained within them, and what they are contained in. With a simple example like this, simply setting it to a static height of 200px and putting a border, you can see that the divs are the same height. Without declaring a height, both divs would be different heights, and you could play with that on the fiddle.

To see this working, check out the fiddle here: https://jsfiddle.net/john_h/rnnjx28m/

You can add this CSS to set the heights on your class:

.tinted-container {
  height: 200px;
  border: 1px solid black;
}

.grid-column-half {
  float: left;
  display: inline-block;
}

And your html can stay the same:

<div class="grid-row">
      <div class="grid-column-half">
        <div class="tinted-container">
          <p>Taller</p>
          <p>column</p>
          <p>on</p>
          <p>left</p>
        </div>
      </div>

      <div class="grid-column-half">
        <div class="tinted-container">
          <p>This container should be the same height as the other one.</p>
        </div>
      </div>
    </div>

You will need to play with your spacing to get your intended look!

You would need to ignore it or use the CSS overflow property: http://www.w3schools.com/cssref/pr_pos_overflow.asp using `overflow: scroll;` will add a scroll bar to the div, or using `overflow: auto` will add a scroll bar if the content doesn't fit within the element height — john_h, Sep 08 '16 at 13:00
Read about `display:flex;` it will help you to improve your knowledge, http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height — Abhishek Pandey, Sep 08 '16 at 13:28

How to have two sub-divs the same height as each other

2 Answers2