Equal height columns with CSS

Question

I would like to use percentage for my css table. Unfortunately, it doesn't work for me.

What's wrong with this code? Should I use flexbox instead of table?

I would like to use table, because I would like same height columns.

ul {
  list-style: none;
  margin: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
}

li {
  width: 50%;
  display: table-cell;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

So you want the list items to be half the width of the window? Then the ul would be 300% wide, not 100%. You choose: either the percentages add up to the correct numbers, or you will need to leave out one of the values and let the browser calculate the width itself. — Mr Lister, Nov 19 '15 at 20:39
Do I undestand you corretly that you're trying to get two list items next to each other and next ones should appear in the next line? — Keammoort, Nov 19 '15 at 20:45
You cant break columns into multiple lines without wrapping them with rows. You have to use flexbox for this, here is my visual guide for beginners http://prettyminimal.com/flexbox . — Dariusz Sikorski, Nov 19 '15 at 20:48

score 11 · Answer 1 · edited May 23 '17 at 12:16

Equal Height Columns with Flexbox

HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

CSS

ul { display: flex; }

With the simple code above, you can put any amount of content in a list item, and all list items will have equal height.

DEMO

Notes:

An initial setting of a flex container is flex-direction: row, which means that child elements (aka, flex items) will line up horizontally.
Another initial setting of a flex container is align-items: stretch, which causes flex items to expand the full height (or width, depending on flex-direction), of the container.
Together, both settings above create equal height columns.
Flex equal height columns apply only to siblings.
Applying a height to a flex item overrides the equal height feature.
Equal height columns apply only to flex items on the same line.
How to disable equal height columns in Flexbox?

Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.

score 2 · Accepted Answer · answered Nov 21 '15 at 14:27

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>

score 0 · Answer 3 · answered Nov 20 '15 at 20:55

I'm throwing up an answer to an interpretation of the question that differs from @Michael_B. With the initial style of width: 50%; on the li elements, I'm thinking the desired result is to have the six list-items flow into 2 columns and 3 rows. Such a case cannot be readily solved using CSS tables but is relatively simple with flexbox.

ul {
  list-style: none;
  margin: 0;
  width: 100%;
  /*kills the irritating intial padding on uls in webkit*/
  -webkit-padding-start: 0;
  display: flex;
  flex-flow: row wrap;
  /*stretch is the default value, but it will force items to stretch to match others in their row*/
  align-items: stretch;
  /*below properties just emphasize the layout*/
  padding: 2px;
  background-color: green;
}
li {
  /*forces border-width and padding to be part of the declared with (50% in this case)*/
  box-sizing: border-box;
  width: 50%;
  /*list-item, inline-block, and block work equally well*/
  display: list-item;
  /*below properties just emphasize the layout*/
  border: white 2px solid;
  background-color: lightgreen;
}
/*I set this property to show what happens if 1 item has a different height*/

li:nth-child(3) {
  height: 40px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

Equal height columns with CSS

3 Answers3

Equal Height Columns with Flexbox

Linked