CSS Making Two Divs Equal Height with Display Table

How do I keep two side-by-side div elements the same height?

Flexbox

With flexbox it's a single declaration:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

CSS making two divs equal height with display table

Remove the float, which takes the elements out of the document's normal flow, and also add in another wrapper element, to act as the table-row:

table-cell, behaves like the <td> HTML element

Which implies that this requires (though I've not verified my inference) a display: table-row parent, as a td requires a tr parent-element.

.wrap{
    overflow:hidden;
    width:250px;
    display: table;
    border-collapse: collapse;
}

.row {
    display: table-row;
}
.left{
    width: 50%;
    display: table-cell; 
    background-color: #0f0;
}

.right{
    width: 50%;
    background-color: #f00;
    display: table-cell;     
}

JS Fiddle demo.

References:

CSS display.

HTML/CSS: Making two floating divs the same height

You can get equal height columns in CSS by applying bottom padding of a large amount, bottom negative margin of the same amount and surrounding the columns with a div that has overflow hidden. Vertically centering the text is a little trickier but this should help you on the way.

#container {
  overflow: hidden;
      width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* Thank you IE */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head></head>

<body>
  <div id="container">
    <div id="left-col">
      <p>Test content</p>
      <p>longer</p>
    </div>
    <div id="right-col">
      <p>Test content</p>
    </div>
  </div>
</body>

Make two floating tables the same height

A fairly simple and robust way of doing it is to wrap your two tables into a CSS table by defining a parent container .wrap and two cell lever wrappers .cell-wrap.

The .wrap has display: table and width 100%, which gives you the full width of the screen (or parent block).

Each .cell-wrap has display: table-cell which force these two elements to take on the same height, you also need to set the height to 100% for this to work, and vertical-align: top (or similar).

To get the widths that you need, simply set the width of one of the .cell-wrap elements to some value, for example, 70% on the left .cell-wrap.

You then set the height of the nested tables to 100% and the two tables will scale to the same height. Remember to set the width of the nested table to 100% or else they will take on a shrink-to-fit value.

Although it takes extra mark-up, it is easy to understand, robust, and no JavaScript required. In this case, I would forgive the extra mark-up to get the design that you need.

.wrap {  display: table;  width: 100%;  height: 100%; /* need to set height for this to work in Chrome */}.cell-wrap {  display: table-cell;  vertical-align: top;  height: 100%;}.cell-wrap.left {  width: 70%;  padding-right: 10px;  /* if you need some whitespace */}table {  border-collapse: collapse;  border-spacing: 0;  height: 100%;  width: 100%;}table td, table th {  border: 1px solid darkgrey;  text-align: left;  padding: 0.4em;}

<div class="wrap">  <div class="cell-wrap left">    <table class="left">      <tr>        <th>Row1</th>        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>      </tr>      <tr>        <th>Row2</th>        <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>      </tr>      <tr>        <th>Row3</th>        <td>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</td>      </tr>      <tr>        <th>Row4</th>        <td>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td>      </tr>    </table>  </div>  <div class="cell-wrap right">    <table class="right">      <tr>        <th>1</th>        <td>Monday</td>      </tr>      <tr>        <th>2</th>        <td>Tuesday</td>      </tr>      <tr>        <th>3</th>        <td>Wednesday</td>      </tr>      <tr>        <th>4</th>        <td>Thursday</td>      </tr>      <tr>        <th>5</th>        <td>Friday</td>      </tr>      <tr>        <th>6</th>        <td>Saturday</td>      </tr>      <tr>        <th>7</th>        <td>Sunday</td>      </tr>    </table>  </div></div>

How to make sure two divs have the same height?

Unfortunately there is no perfect method to do this without using Javascript as realistically the two divs know nothing about one another.

What your options are depends on what exactly you were looking to achieve visually.

A quick google search brought this up which looks quite promising: http://www.vanseodesign.com/css/equal-height-columns/

If you can focus on more modern browsers you may be able to get away with using flexbox. See this post for examples etc: http://css-tricks.com/fluid-width-equal-height-columns/

Equal Height Columns with display: table. width

You can use the table-layout:fixed; property, it should spray the columns evenly(question keyword : equal width).

You can also add a width to secure it . border-spacing should be included within the width calculation if you also uses it.

https://www.w3.org/TR/CSS2/tables.html#propdef-table-layout

17.5.2.1 Fixed table layout

With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.

.col-container {  display: table;  width: 100%;  margin: 0 auto;  table-layout: fixed;}
.col {  display: table-cell;  border: solid;}
.w {  margin-top: 1em;  border-spacing: 2px;}/* add width and border-spacing */.w.col {  width: 33.33%;  box-sizing: border-box;}

<div class="col-container">  <div class="col col1">    <h2>Column 1</h2>    <p>Hello World</p>  </div>
  <div class="col col2">    <h2>Column 2</h2>    <p>Hello World!</p>  </div>
  <div class="col col3">    <h2>Column 3</h2>    <p>Some other text.. Some other text.. Some other text.. Some other text..</p>  </div></div>
<div class="col-container w">  <div class="col col1">    <h2>Column 1</h2>    <p>Hello World</p>  </div>
  <div class="col col2">    <h2>Column 2</h2>    <p>Hello World!</p>  </div>
  <div class="col col3">    <h2>Column 3</h2>    <p>Some other text.. Some other text.. Some other text.. v Some other text..</p>  </div></div>