Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Equal height columns with CSS

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>
like image 974
user1452062 Avatar asked Nov 19 '15 20:11

user1452062


2 Answers

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>
like image 28
Asons Avatar answered Oct 19 '22 03:10

Asons


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.

like image 157
Michael Benjamin Avatar answered Oct 19 '22 03:10

Michael Benjamin