Min-height not working with display: table?

Posted on March 15, 2015 in HTML/CSS Category

If you have problems using display: table property on a div and inside it you have another element with display: table-cell and you want it to be vertically aligned middle and min-height not working properly, here is a quick fix that allows you to use min-height properly in all browsers, including Mozilla Firefox.


Supposing that you have a div and inside you have another one. The main div should have, for example, min-height 100 pixels. The inner div should be vertically aligned in middle, but if text will be longer, height must update automatically. Also if the text is short, min-height should be fulfilled.

<div class="table">
	<div class="cell">
		Lorem ipsum dolor sit amet.


We will consider that div with the class .table to have display: table and the inner div with class .cell to have display: table-cell. Our CSS should look like this:

.table {
	display: table;
	width: 100%;
	min-height: 100px;
.cell {
	display: table-cell;
	vertical-align: middle;

Min-Height Not Working in Firefox

Strangely, min-height is fulfilled in Chrome without any problems, but when I tested it with the latest version of Firefox, min-height is not working at all.

Min-height not working in Firefox

The Solution

If you add a fixed height to the main div with display table, min-height seems to work perfectly in all browsers. As stated on w3schools website, the value of the min-height property overrides both max-height and height. Read more about min-height property here.

.table {
	display: table;
	width: 100%;
	height: 100px;
	min-height: 100px;


Now all browsers will fulfill the fixed height of 100 pixels and also the min-height. If the user will add more text and the div will be higher than 100 pixels, container will have the same height as the text. Please note that older browsers such as Internet Explorer 7 does not support min-height property.

You can check the live demo below or download the files to see the full code.

Live Demo

Download Files

Related Articles
  1. Carlos says:

    Many thanks

  2. Hannah says:

    This was driving me nuts! Thank you for the solution!

  3. Vince says:

    Yes! It works! Thanks a lot! :)

  4. Vee says:

    Thank you so much.. It worked !!

  5. BumpasaurusX says:

    Thank you! Firefox was driving me nuts with this silliness. Did not know about min-height overriding height, that’s good to know!

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

seven − = 1

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.