Min-height not working with display: table?

Posted on March 15, 2015 by Dan Doicaru 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.

The HTML

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.
	</div>
</div>

The CSS

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;
}

Conclusion

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

Rate & Share
1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 5.00 out of 5)
Related Articles
Comments
  1. Gravatar Icon Vince:

    Yes! It works! Thanks a lot! :)

  2. Gravatar Icon Vee:

    Thank you so much.. It worked !!

  3. Gravatar Icon BumpasaurusX:

    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.


7 + 2 =

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.