Css - Equal Height Columns

CSS - Equal Height Columns?

Grid

Nowadays, I prefer grid because it allows keeping all layout declarations on parent and gives you equal width columns by default:

.row {  display: grid;  grid-auto-flow: column;  gap: 5%;}
.col {  border: solid;}

<div class="row">  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div></div>

Equal height columns - CSS

Use flex-wrap: wrap; with display: flex; on .outer and give width on .inner

.outer {
    display: flex;
    flex-wrap: wrap;
}

.inner {
    background: #fff;
    border: 1px solid #000;
    padding: 10px;
    margin-bottom: 20px;
    width:20%;
    text-align: left;
    box-sizing: border-box;
}

https://jsfiddle.net/k7oLbqj1/6/

Equal height columns in css except one column

You can make the top ribbon to be absolute position and rely on flexbox for the remaining to have equal height:

* { box-sizing:border-box;}
body {  background-color: #a3d5d3;}.container {  display: flex;}
.some {  margin-top:50px;  margin-right: 30px;  position:relative;}
.recommended {  position:absolute;  background-color: yellow;  left:0px;  right:0px;  height: 40px;  top:-40px;  padding: 5px 10px;}
.one {  background-color: transparent;}
.box {  width: 200px;  height:100%;  background-color: green;  padding: 10px;}

<div class="container">
  <div class="some">    <div class="recommended one"></div>    <div class="box">      foo<br> bar      <br> foo bar      <br> foo  bar      <br>    </div>  </div>
  <div class="some">    <div class="recommended">Recommended Card</div>    <div class="box">      foo<br>    </div>  </div>
  <div class="some">    <div class="recommended one"></div>    <div class="box">      foo<br> bar    </div>  </div>
</div>

Bootstrap equal column height size

Add h-100 or height: 100%; to the first child of col-md-6 column start for both columns.

<html>

<head>
  <title>Page Title</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!--JS-->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>

<body>
  <div class="col-xs-3">
    <div class="row">
      <div class="col-md-6">
        <div class="shadow p-3 mb-5 bg-white rounded h-100">
          <div class="container">
            <div class="row">
              <div class="col-md-6">
                -Icon-
              </div>
              <div class="col-md-6">
                <p>Date</p>
              </div>
            </div>

          </div>
          <p>Author</p>
          <div class="row">
            <div class="col-md-6">
              <p>Time</p>
            </div>

            <div class="col-md-6">
              <div>

              </div>
            </div>
            <!-- This needs to get the latest unread message -->
            <!-- {% if unreadMessagesCount %}
                            <p>Unread: {{unreadMessagesCount}}</p>
                    
                            {% if inbox %}
                                <div>
                                    <p>{{inbox.first.sender}}</p>
                                </div>
                                <div>
                                    <div>
                                        <p>{{inbox.first.subject}}</p>
                                    </div>
                                </div>
                                {{inbox.first.text}}
                                {{inbox.first.time}}
                            {% endif %}
                        {% else %}
                            <p>Unread: 0</p>
                            <div>
                                <p>There are no senders</p>
                            </div>
                        {% endif %}  -->
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="shadow p-3 mb-5 bg-white rounded h-100">
          <div class="container">
            <div class="row">
              <div class="col-md-6">
                -Icon-
              </div>
              <div class="col-md-6">
                More stuff than possible
                <!-- {% if request.user.refresh_token != "" %}
                                    <div>
                                        There are maybe some
                                    </div>
                                    {% else %}
                                    <div>
                                        There are no calendar events
                                    </div>
                                {% endif %}  -->

              </div>
            </div>

          </div>
          <p>Author</p>
          <div class="row">
            <div class="col-md-6">
              <p>Time</p>
            </div>

            <div class="col-md-6">
              <div>

              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- This needs to get the earliest calendar event -->
    </div>
  </div>
</body>

</html>

Equal height columns with CSS

Here is a sample using ul/li elements, 2 columns using percentage and have equal height.

As tables prefer table/row/cell layout, I restructured your html a little.

* {    margin: 0;}html, body {    height: 100%;}.table {  display: table;  width: 90%;  height: 60%;  padding-top: 5%;  margin: 0 auto;}ul {  display: table-row;  list-style: none;  margin: 0;}
li {  display: table-cell;  width: 50%;  border: 1px solid #999;}

<div class="table">  <ul>    <li>1</li>    <li>2</li>  </ul>  <ul>    <li>3</li>    <li>4</li>  </ul>  <ul>    <li>5</li>    <li>6</li>  </ul></div>

Css - Equal Height Columns