How do I use max-height on <div> element?

http://msdn.microsoft.com/en-us/library/ms530809(VS.85).aspx

says that max-height doesn't work with tables. try removing the table that is inside your div.


Try setting just the height, and overflow to 'scroll'. Visually, there may not be a difference between the outter-box being full-height, and it not being full-height. If that is the case, I would simply refrain from using max-height in place of height.

Could you show us a bit more of your code, or perhaps an online demonstration? I'd be interested in seeing some of the css, and the doctype.


IE has supported max-height since IE7 — but only in Standards (AKA Strict) mode.

Make sure you have a Doctype that triggers standards mode as the first thing in your document. (Quirks mode can screw up a lot of things, so never write a document without a Standards mode triggering Doctype unless you have a very very good reason to do so).


In addition to max-wdith, you may use the following expression to make sure it is cross browser compatible:

width: expression(this.width > 400 ? "400px" : true);
height: expression(this.height > 400 ? "400px" : true)

reference: http://www.fastechws.com/tricks/web/image-max-width-height.php