Member Avatar for sriram.venkata

Hii people !!!
In one of the web pages I am designing, I have 3 tables whose width and height I am defining using div. I am able to properly set the width . But when it comes to height, I need to set both the maximum height and the minimum height. I tried using both the max-height and min-height , but only one of these two attributes is applied....

Please advice,

  • 4 Contributors
  • 5 Replies
  • 120 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by FC Jamison

Dani AI

Generated

Short answer: use standard min-height/max-height with overflow for modern browsers, and provide a small, targeted fallback for very old IE (IE6). is right that older IE behaves oddly; is partially right about height quirks; and ’s CSS-expression trick will work in legacy IE but has serious performance and maintainability drawbacks.

A simple, robust approach for current browsers:

.division {
  min-height: 200px;
  max-height: 600px;
  overflow: auto;        /* show scrollbars if content exceeds max-height */
  box-sizing: border-box;/* makes padding part of the height calculation */
}

This gives a true minimum and a clipped/scrollable maximum. For a single-property shorthand in modern browsers, height: clamp(min, preferred, max) can also be handy.

If IE6 support is required, avoid CSS expressions unless you accept the performance hit. Prefer one of these safe fallbacks:

  • Serve an IE-only stylesheet using conditional comments (or server-side UA detection) and apply an IE-specific rule that emulates min-height (IE6 treats height like min-height) or uses a tiny, one-time JavaScript function on load to clamp the element’s style.height when necessary.
  • Or accept graceful degradation: let old IE expand the block (many sites did this) and use overflow to limit visible content where needed.

Quick checklist when things still misbehave:

  • Ensure a standards DOCTYPE so browsers use the standard box model.
  • Check box-sizing and any padding/border that affects computed height.
  • Use overflow to control behavior when content exceeds max-height.
  • Prefer progressive enhancement: standard CSS first, targeted fixes for legacy browsers.

Reference: browser support and behavior details for min-height/max-height on MDN: min-height and max-height.

Recommended Answers

All 5 Replies

Member Avatar for enque

IE will treat height similarly to min-height -
content will push the height of a box higher if it does not fit in the specified height.
Basically min and max height properties isn't supported by IE.

Member Avatar for DangerDev

height, width and min-height is supported by IE6 other things are not supported by it

Member Avatar for sriram.venkata

In that case, how do i go about implementing the max as well as min height in IE?

Member Avatar for DangerDev

see the orkut code using firebug.

Member Avatar for FC Jamison

I found this googling around:

max-height

* html div#division { 
   height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */
   max-height: 333px; /* sets max-height value for all standards-compliant browsers */
}

min-height

* html div#division { 
   height: expression( this.scrollHeight < 334 ? "333px" : "auto" ); /* sets min-height for IE */
   min-height: 333px; /* sets min-height value for all standards-compliant browsers */
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.