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


Tags: html,css

Problem :

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?



Solution :

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>


    CSS Howto..

    How to style an anchor tag to look like a button with the same height as the button?

    How to make selected file name visible?

    How do I return all CSS properties applied to an element by an external stylesheet class (not get computed styles!)?

    how to check what css code is invalid using browser plugins [closed]

    How to create CSS heart? / Why is this CSS creating a heart shape?

    How can I nullify css property?

    How to push floated element to below another floated element?

    How to Limit the Div Exactly into the Screen Size

    How to stack text with pure CSS?

    How bad is to store all background images in CSS?

    How to manage textarea right side overflow in css?

    Javafx CSS How to inherit background color from other css settings

    How can I use True Type Collection (.ttc) in JavaFX?

    How to create custom archive page on Tumblr

    How to break up long words but leave out short ones?

    How to have a color change animation on a button outline?

    How do I set a CSS width from a javascript function result?

    How to generate ABBAABBA… sequence with PHP and CSS nth-child

    How to Keep element absolute at their location bootstrap 3

    Bootstrap: user agent css styles misbehaving how to solve this

    SceneBuilder (by gluon) doesn't show imported fonts

    How do i split user inputed text into individual characters?

    CSS - how to avoid class= for every single paragraph?

    How do I override Bootstrap's
    border-left with a FontAwesome icon in CSS?

    How to center a div being focused? [vertically]

    How to wrap table cell at a maximum width in full width table

    Is there a CSS style guide for large existing projects. Or how could I optimize the css for a large project [closed]

    CSS How to get height between header and footer?

    How do I get jQuery to change classes according to an If/Then statement. My 'home' link will not change class when another link clicked on

    CSS - How can I push the submenus to the left?