Equal height columns with CSS
Solution 1
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>
Solution 2
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.
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 onflex-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.
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.
user1452062
Updated on June 05, 2022Comments
-
user1452062 almost 2 years
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>