with Imagination: by Dustin Diaz

./with Imagination

A JavaScript, CSS, XHTML web log focusing on usability and accessibility by Dustin Diaz

Min-Height Fast Hack

Wednesday, September 21st, 2005

I’ve never been one too keen Grey’s css min-height hack, mainly because of the bulky workaround in your html. Sure hacks can cause bulkier CSS, but I’m ok with that. The problem with Grey’s is that it’s not only a ‘CSS‘ hack (which I’m totally fine with), but it also involves changing your html. I’m none too delighted that you need to add two separate empty div elements just to get this working correctly. Nevermind the matter, he thought of this ages ago when I was still learning how to count to twelve on sesame street. Ok so I learned that like last year, I’m catching on.

A New Solution

Assuming each and all you folk know how min-height is ’supposed’ to work, would it be all that bold that it’s safe to say that…well… can’t we just do this? (because that’s what I’ve decided to do after throwing IE5.x out the window)

CSS: min-height with !important

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

Assuming IE6 will not fix the correct implementation for the !important declaration and assuming that if IE7 does, they’ll also implement min-height correctly since at the pace they’re going they’re fixing CSS like mad crazy cows. Is that too many assumptions? But wouldn’t you agree?

The above snippet of CSS works like a charm in IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2

Update: 2006-05-01 This patch is now fully supported across IE6 and IE7. Gosh, I guess I should have named the hack when I thought of it. Enjoy :)

283 Responses to “Min-Height Fast Hack”

  1. Jens Grochtdreis

    Nice idea, I am a little bt furious I didn’t come up with it, either. But after rethinking your idea there is one question left: where is the real advantage of this idea compared with using a child-selector? IE doesn’t know them, too. Every “real” Browser understands them. So can’t we use them the same way? The only advantag of your approach is in my eyes, that you have all the height and min-height together in one selector.

  2. perishable

    Thank you for the no-frills min-height hack — it sure did the trick, and with no fuss whatsoever.

    Cheers!

  3. Hyperion

    Very nice.

    I would assume it works for min-width as well?

  4. Dustin Diaz

    yes. it does. try it out.

  5. FoodMike

    Great little trick. I think it is cleaner and easier to understand than the child selector hack. Thanks!

  6. Tim Tops

    This is great. This will save many headaches

  7. Ros

    Thank you! After much trial and error, this solution worked like a charm!

  8. Yelldog

    After many a night wasted on a simple centering fix I found this little trick to be a jem. But recently working with firefox 1.5x this trick wasn’t working right. I always use a page container div tag and each content or menu section has its own div tag. In firefox 1.5x my page content was not positioning correctly.

    Simple fix that might be helpful:
    min-height: 580px;
    _height: auto !important;
    height: 580px;

    Not exactly sure why this works but now firefox 1.5x and 1.0x work as well as IE. I havn’t tried this in any other browsers yet.

  9. Der Dominic

    Thanks!
    Simple & effective.
    Best solution ever.

  10. raina

    Works, thanks!

  11. jim

    this works great! saved me a ton of agony!

  12. Lance Fisher

    Once again, I find something very useful on this site. Thanks.

  13. Tim

    Brilliant solution. Thank you for sharing.

  14. Pedro

    A good solution, unfortunately, having downloaded the IE 7 Beta 2 Preview it doesn’t seem that “IE7… [will]… also implement min-height”

  15. Ronald Poi

    This saved me!… Thank you very much =)
    This site goes to my bookmarks

  16. Matt

    Thank you. This solved my problem.

  17. Ejaz Siddiqui

    Thanks Buddy,
    I worked nice for me.

  18. Ejaz Siddiqui

    sorry a typo
    It worked nice for me.

  19. Henning Habor

    How about a solution that validates?

    The proposal redefines the height value, which gives a warning when trying to validate your stylesheet.

  20. Brian McNitt

    Worked for IE6, but not in IE7 Beta 2. Anyone have an IE5-IE7 safe fix?

  21. Brian McNitt

    A preliminary answer to my own question, this seems to work for IE6/IE7.

    #element {
    min-height:500px;
    }
    * html #element
    height:500px;
    }

    Perhaps there is a smarter way?

  22. Jeff Simon

    Could not get this hack working for min-width. Strangely, IE treated it as just width, but Firefox as min-width!

    Am using hack from http://www.webreference.com/programming/min-width/2.html for min-width, which works but is messier.

  23. Codeninja

    ABSOLUTELY BRILLIANT!!!

  24. Jeff

    Doesn’t seem to work for IE7 beta, as mentioned prior. As for #21, Brian, I’ve read articles the the star hack isn’t supported anymore by IE7 beta and I can’t get it to work, so I’m interested in your secret…

  25. Dustin Diaz

    @All: This will indeed work with IE7 once it’s out of beta :D

  26. Min-height|Max-height and Min-width|Max-width Fixed!

    […] Having already known about this from the internal Y! news but not being able to blog about it until now (I totally wanted to be the first to announce this), IE7 beta2 has implemented the much anticipated css properties known as min-height, max-height, min-width, max-width. With this piece of news we can now fully rely on my old min-height fast hack trick for IE6 as it will now officially not break IE7. Whoo hoo! Today is a great day! […]

  27. piterX

    thank you very much.it solves the problem i think.

  28. deweydesigns

    omfg… i have tried every hack variation known to man to get max-width to work for ie for a series of images in a myspace profile. none of them worked…

    this one does. sweet thank you.

    http://www.myspace.com/deweydesigns

    see right hand column images… they are now no more than 290px.. just like in firefox!

    question… why is microsoft so bullheaded about following the rules when it comes to css?

  29. Blair

    Awesome fix, thanks for sharing. Can’t wait for MS to finally release a browser that actually follows the standards…

  30. mejobloggs

    Apparantly it works with min-width as well?

    #wrapper-outer {
    margin: 0 auto;
    min-width: 960px;
    width: auto !important;
    width: 80%;
    }

    How come that doesn’t work?

    It’s meant to be a centered div. 80% wide, but will not shrink below 960px.

  31. Brownspank

    I’m not so sure how to make it work for BODY, or if it works in that particular context (BODY wrapper with implicit-full-width DIVs).

  32. Dustin Diaz

    mejobloggs, it doesn’t shrink below 960px because that’s what you’ve declared as a minimum width. That’s what it’s supposed to do. The point was to use the same value in both cases. If you don’t want your width to shrink below 80%, then declare that as your min-width.

  33. Jonathan

    Sorry, I think I mis-explained.

    I want it to be 80% wide, but not be able to shrink below 960px.

    If you set up a basic page, and have a div with the following css…
    width: 80%;
    min-width: 960px;

    Put content in, and a border on so you can see it.

    So in Firefox if you have a higher resolution, the page will stretch to 80%, but if you have a lower resolution, the page will be fixed at 960px.

    So to make this work in IE, it should be:

    #mydiv {
    min-width:960px;
    width: auto !important;
    width: 80%;
    }

    Yet this does not work (well, I couldn’t get it to).

    I have managed to do this in IE using another way. It required 3 extra divs, and lots of wierd css. Nothing like this nice and clean version here.

  34. Dustin Diaz

    Even with no hacks or filters or workarounds whatsoever, what it comes down to is, if you have a min-width of 960px, it will never get smaller than that. In some resolutions, 80% will be larger than 960px, and others it will be smaller. Thus at this point, it really has nothing to do with the hack that i’m talking about. If you want something to be 80%, but never to go below 960px, that is technically and mathematically impossible. Unless of course, I still misinterpreted what you’re saying.

  35. Jonathan

    Ok, I just must be confused :(

    “Even with no hacks or filters or workarounds whatsoever, what it comes down to is, if you have a min-width of 960px, it will never get smaller than that. In some resolutions, 80% will be larger than 960px, and others it will be smaller.”

    That is exactly what I want.

    It can be done in FF using the following:

    #my div {
    width: 80%;
    min-width: 960px;
    }

    But that doesn’t work in IE, because IE doesn’t understand min-width.

    I thought your hack here would fix this in IE, but I guess not.

    The solution to what I am talking about is here:
    http://www.cssplay.co.uk/boxes/width3.html

    It is ok, but as I said, it’s a lot more code than your hack (which I thought would do the same thing). The link I included gives a demo, but the background can only be a solid colour. To make it transparent you have to add yet another div :(

  36. Da Man

    selector {
    min-height:500px;
    height:auto !important;
    height:500px;
    }

    What about:

    selector {
    height:500px;
    min-height:500px;
    }

    This doesn’t work for percentages!!!!! Only pixels.

  37. Daniel

    Great!

  38. Jocelyn

    Thank you *insert marriage proposal here*

    Was hitting my brains out trying to get min-height to work - thank you, thank you :D

  39. Andyman3000

    U sure this will work in IE7 once it’s out of Beta? Then this is absolutely great. If not, there is still the godd old dirty ‘js in css’ hack ;)

    example for min-height:

    #cssId{
    height: expression(this.height

  40. Collin Yeadon

    This will of course not work for min-width. IE doesn’t need to push the width out when it can just drop the line down. the reason this hack works for min-height/height is because FF respects when you set a height and forces it where as IE will push the height down. Basically IE actually supports min-height but they call it “height”.

    For min-width the best solution I can think of is javascript. If the width of an object is made smaller then the minimum width you would like to maintain then capture the current browser width and set the objects width to the minimum size. When you detect the browser is larger then the size we captured it would then need to reset the object (div) to the previous width percentage or auto.

    Hope that makes sense..

  41. Dustin Diaz

    Collin, actually, I think I remember saying those exact words somewhere else of “actually, IE does support min-height, they just misnamed it ‘height’”

    So I definitely know where you’re coming from.

  42. Aure

    Thank you so much for this…

    searched for many many hours for such a fix

  43. Rod

    I have searched few hours to find the Holy Grail … and I have found it :) Works like a charm on my IE 7 beta 2 + Opera + FF .. so … perfect :) THANX x 1000000

  44. Rod

    Hummm .. finally problem :)
    http://www.sortons.net/dev/aleho/rod/2/index.htm
    >> it’s OK if my div = plain text.

    but …

    http://www.sortons.net/dev/aleho/rod/2/index3.htm
    >> big problem if the content of the div is pics …

  45. mark

    The boys @ redmonkey would like to thank you for this nice solution for the annoying min-height problem!

  46. tuneczar

    Brilliant — ever so grateful, mate!

  47. Keith

    Thank you so much, You saved my day…

  48. Rend

    Much obliged, thanks for the useful hack.

  49. adrijus

    thanks

  50. Daniel

    I was having problems with IE 7.0 and min height, but finding this site ur solution worked perfectly :)

  51. Tomasz

    I’m so happy THIS hack worked I could cry. I hate IE and this finally solves it. While it’s not 100% like I would like it 99% is good enought for me. After week fo trials and tribulations.

    Thanks.

  52. Lee Jorgensen

    Excellent - I’ve previously used Grey’s “min prop” successfully but with some arsing around - this simplifies things and helps immensely; thanks…

  53. Max Winterhoff

    Thanks for this great hack, it really made things easier after having problems with IE for hours!

  54. Kocsis Janos

    Thanks a lot.
    It works fine, and it’s easy to implement.

  55. Lars van der Plank

    Very nice! Thanks.

  56. Darek Rusin

    Thanks a lot mate, that saved my butt! Clean and easy. I keep my fingers crossed for the IE7 case.

  57. Nigel Duckworth

    So close. I have overflow: hidden on the div I need to set a min-height on and that’s causing the div to clip the content in Win2K/IE6 and XP/IE6. The height: auto !important doesn’t seem to help. Dang!

  58. Justin

    A bit late, but does it happen to work in IE7 Beta 3?

  59. Dustin Diaz

    Yes. it works just as expected for IE7 since they’ve implemented everything correctly :)

  60. Jake Rutter

    Great Hack! I have been having this problem with a site in IE6 for about 6 months, I have been manually fixing the template each week to correct the height problems. This is a lifesaver!

  61. Dave Hill

    Hi,
    Just wanted to say thanks for this hack! It works like a charm. I just wish I had found it before I spent several hours trying other workarounds.
    Thanx again.
    Dave Hill

  62. Pat

    Whew, quick fix. thanks and Cheers!

  63. aNieto2K - » CSS: min-height hack

    […] ¿Como no? IE no soporta el atributo min-height de CSS a la hora de asignar un tamaño mínimo a una capa. DustinDiaz nos trae un hack para conseguir que IE no sea un problema con nuestras capas. […]

  64. Webmaster Libre - Desarrollo Web con Software Libre

    […] En aNieto2k se ha publicado hoy un enlace a un hack que nos ayudará a solucionar este problema, nada que no pudiésemos hacer ya con otros trucos de los que ya hemos hablado, no obstante es interesante y bastante limpio para ser un hack: Min-Height Fast Hack por Dustin Diaz […]

  65. Phil

    Sheer Brilliance. IE is such an annoying browser so thanks for the fix :)

  66. Grant

    Wonderful - thank you very much - this is another site bookmarked :)

  67. Mboy

    I know you’ve heard it a lot but…Thanks Dude!!!

  68. D Swan

    Thank you very much…you have ended 2 days of headaches…

  69. Digital Volcano

    Good CSS thanks. Will use it on the new website.

  70. Stefan

    Great! I tried several other ways to fix up my CSS-layout - but everything always came down to that min-height seems to be the only that worked. And your trick even made it work on IE.

    Genius! :-)

  71. gels

    BEST. HACK. EVER.

    subtitle:
    “In your face, min-height!”

  72. Best Min-Height Hack Ever! at Better Web Posse

    […] After falling upon this hack, how could I not post it? Thanks to Dustin Diaz for this amazingly simple and fast min-height hack! […]

  73. Mukesh

    my problame is when i giving background color in main div and afterthat we including two three div in main dive that time main div background color is not expending in mozilla.

  74. ressa

    thanx.. it solve my problem

  75. vince

    Before I made separate stylesheet for this issue!

    Don’t call it a hack, it’s an “elegant solution”…

  76. Richard

    HI.

    To fix the IE bug this is indeed a great little hack, however in other browsers (Opera for example), I’m finding the static height value takes priority over the auto value.

    To see what I mean, use the above CSS on a div tag and then open that page in Opera, using the “View”-”Style”-”Debug with outline” setting. The div tags will be shown with a dotted outline and, as you can see, the height of these tags never exceeds the static height setting in your CSS. This is a real pain when seperating multiple div tags with single line breaks. Whats more, if using the float element on an image within this div tag, the layout becomes thrown out even more!

    Why can’t Microsoft just %&#@ off and let the real software developers dominate. All this buggy software causes nothing but trouble.

  77. rick

    As far as I know !important was meant for overruling userbased stylesheets. Another nice option is to use conditional stylesheets for IE (http://www.internetschoon.nl/viewSingleItem/207/CSS-hacks-en-IE7.htm). Allthough it is a pity that a major browser like IE does not fix common CSS issues in de IE7 release (it even implements some more issues).

  78. Istvan

    FANTASTIC! Thanks!
    It’s a shame one has to resort to such tactics, though. Instead of playing around with tables/HTML do acheieve the layout we want, we now (still) have to do pretty much the same with CSS… only it’s much more complex… Well, one day!

  79. Chris In Cincinnati

    Just wanted to add yet another thanks, this has saved the drywall in my office from another head-bashing.

  80. Richard

    In my above message I mentioned priority issues. Turns out this was my mistake for not interpreting the above code correctly - I.E. I didn’t realise the properties had to be ordered precisely.

    Unfortunately I like to keep my CSS sheets alphabetically ordered, so the above throws that out slightly, but other that warnings of multiple instances of the same (contradicting) properties in a single element, the CSS does at least remain W3C complient.

    Cheers.

  81. iim.vxk

    thx, u saved me lot-of-hours-of-ligue in a mexican-mall of monterrey, nuevo león!!

    Dustin Diaz RuLz! [and Opera-Browser too]

  82. nikd

    I had to thank …. only wish I saw this earlier

  83. andrewcheong

    thank. you. so. much.

  84. ps

    How can I get min-height & max-height to work together?
    I want to create a table which has a maximum height of say 500 px.
    But if there is not enough content to fill the table, then the height should be limited to the size of the content.

  85. Code choices: What’s better?

    […] /* ala http://www.dustindiaz.com/min-height-fast-hack */ selector { min-height:500px; height:auto !important; height:500px; } […]

  86. Nobody

    Here’s another

    selector {
    min-height: 300px;
    height: expression(document.body.clientHeight ? “300px” : “auto”);
    }

  87. arjen

    thanks. it works like a charm…

  88. lukas

    Perfect solution. Thank you!

  89. webweaver

    oh.my.god this is brilliant in IE7! STOOPID STOOPID IE7 whose bugs are horrible and I can’t fix them the old ways any more… and which seems to be throwing up a ton of new bugs too…

    I have a site with a sticky footer and various other bits of stuff and the footer would *not* do as it was told in IE7 (and neither would half the containing divs). I added this hack (in a conditional comment for IE7 only) to the footer height instead of

    min-height: 100%;

    which works in all my other browsers, and blow me down if it didn’t work like a charm!

    I’ll be using it instead of min-height in IE7 from now on.

    THANK YOU SO MUCH! Genius!

  90. deanna

    THANK YOU!! that worked like a charm..no fuss whatsoever. this is a keeper for sure.

  91. Mike Rodriguez

    Another satifised web designer.

    thanks pal!

    I gave your website credit in the ssheet since you didn’t name the hack -:)

  92. arnie

    thanks much

  93. min-height for Internet Explorer » flipthedolphin

    […] This hack is called “min-height fast hack“. Also thanks to the italian webdesign site HTML.it for the nice article. Share, Tag and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages. […]

  94. Yuri Zakharov

    Thanks! It really works. Your solution helped me many times :)

  95. Olmec Sinclair

    I have been avoiding addressing the min-height issue because all the solutions I have seen have been too dodgy to trust. This is a winner and I’m pleased to be using it in my websites on a regular basis in my role as lead designer and interactive developer at www.cleanweb.co.nz

  96. Dustin Diaz

    @Olmec: Glad to hear it.

    @All: I haven’t commented on this thread in ages, but it’s great to know that it has worked out for everyone.

  97. sunil

    Nice thing.. Help me a lot. Thanks a lot

  98. Matt

    Man, I love when things just work. Thanks for this!

  99. Travis Miller

    Brilliant. I love you.

  100. J

    Posted over a year ago and still a great tip. Thanks dude.

  101. Remi

    Sweeeeeeeeeeeeet.

  102. David

    Cheers! simplicity is alwyas best and you’ve proved it!

  103. Seb

    Thanks man, really helped, I hope Ie chokes and dies.

  104. Jon Buda

    Dude, that is awesome. Thank you. Much better than the other min-height hacks out there.

  105. ANdy

    Thanks very much this worked a treat i’d nearly gotten it myself but had a couple of bits in the wrong order… Works brill cheers

  106. Alan

    Awesome, this hack worked wonderfully. Thanks a bunch.

  107. KevBurnsJr

    Still doin the trick ;)

    Much more concise than Dave Shea’s min-height fix
    http://www.mezzoblue.com/archives/2004/09/16/minheight_fi/

    Kudos.

  108. tk

    Hi,
    I am really stuck using this hack.

    How would I apply it to mimic the max-width CSS code?

    I have several images which exceed 400px in width and are too wide for my site. There are also images which are less than 100px which I display.

    How would I display the image so that it never exceeds 250px in width, but if the image is originally less than 250px wide, it will display as is.

    (eg) If an image is 180px wide, it will display at 180px, not 250px, but if an image is 350px wide, it will display at 250px (auto-resize).

    Everything works fine in FF and IE7, but not IE6.

    Thank.

  109. Programer

    Great dude. U saved me an awfull lot of time.

  110. klutsy

    Amazing!! I thought you need javascript for this. Thank you very much!

  111. John

    OMG, you just made my day!

    I was looking at a simple, clean way of fixing the height problem and did not want to deal with changing classes to id or table-row css hacks. UGH!

    Thanks for your post!

  112. frustrateddev

    Does this hack work for percentages?

  113. still frustrated

    this is not working for me. firefox still does not respond.

  114. Tom

    Great trick, thank you!

  115. DickWhite

    Sweet. You’re a lifesaver

  116. DC - denmark

    This “hack” was exactly what i needed, Microsoft’s IE sucks, it doens’t understand min-height:

    Really nice!

  117. DP

    Thank you so much! I was starting to go batty with trying to make IE do things the correct way and then I stumbled upon this.
    Kudos to you!

  118. Rob

    Thanks so much for this - have been tearing my hair out over IE.

    One question - could I apply the same hack & logic to max-height as well?
    (I want a bordered div which will stay exactly the same width & height no matter what!)

    Thanks again

    Rob

  119. Jake

    I see people have been adding thanks for over a year now, and let me add mine.
    I too was getting pretty upset, until I found this…

    Thanks again

  120. Steve

    Congratulations and thank you for saving my hair!

  121. Fred

    Thank you for a simply but very affective approach. What was taking hours to try to fix, I did with your fix in no time.

  122. funmi

    Excellent!

    After much searching & frustration, here’s something that actually works. The beauty of it is its simplicity.

    Thanks.

  123. php_pounder

    Nice work! Simple and brilliant

  124. Sneaker Cut

    And here I was thinking that min-height just never worked at all. This completely saves my redesign. :) Great save, thanks!

  125. ryan zec

    this does not work for me under IE7, anyone else having trouble getting this to work in IE7 since the min-height does not work in IE7 still. so much for microsoft getting upto css2 standards with IE7.

  126. Mike W

    I have no trouble getting min-height to work in IE7. What are you trying to use it in?

  127. Discorax

    Thank you, this was a quick and easy way. It saved me a lot of time. What a joyous day it will be what IE6 is dead!

    One can hope right?

  128. django

    Styling a structure that I didn’t have control over, this method didn’t work for me for some reason. But the following variant seems to work across Safari, IE6, FF1.5, FF2 :

    #inner_element {
    _height: auto !important;
    height: auto !important;
    height: 850px;
    min-height: 850px;
    }

    The ‘height: 850px’ can be changed to just affect ie6. Haven’t tested this in ie7 and haven’t tested whether the order is important here.

  129. yiftach

    thanks a lot.
    its a very good hack…
    I stile haveing problem in opera 9.10.
    do you know why?

  130. Emma

    Oh dear god. I think I love you.

    Works brilliantly, thank you!

  131. Ivan Mihailov

    Great :) it works. Thank you very much. You saved my neck!

  132. chris

    You rock!

    I’d been playing around with this for 3 hours, fixing IE and breaking Firefox, then fixing Firefox and breaking IE.

    Found this, and 60 seconds later, all is well in the world. Thanks for posting!

  133. Kenny

    Thank you! Thank you! Thank you! =D

  134. vault7 » [css] min-height hack

    […] Procurando por uma solução decente, a que me pareceu melhor foi a apresentada por Dustin Diaz: […]

  135. Dino Latoga

    very neat fix Dustin!

  136. dantanblog » CSS minimale Höhe Lösung

    […] Hier eine Lösung die ich auf http://www.dustindiaz.com/min-height-fast-hack gefunden habe: […]

  137. symvar

    Nice one,

    just what i needed :)

  138. noobie

    hello,
    this trick worked out fine for the FIXED height, but still i have sime question which i can’t figure out.

    please imagine that you have 3 div’s for instance, one is floated to the left, one — to the right and a middle div.

    the height of middle block is variable, so i want my left and right divs to be 100% height so that they could fill the left and right panels with some background.

    your trick ain’tworking if i add
    {
    min-height:100%;
    height:auto !important;
    height:100%;
    }

    to left or right div style.

    please leave alone asking why i just can’t put a table instead of placing 3 divs — this is conceptual question.

    is there any way to tell my siding (floating) divs to have 100% height depending on the middle block’s height?

    solution would be MUCH appreciated, many thanks in advance.

  139. ISTOFIX

    Very nice. Works fine. Good hack.

  140. Elizabeth

    Thank you so much! I was cursing IE this evening but you solved my problem :)

  141. micros » Blog Archive » desarrollo y maquetado XHTML/CSS para Internet Explorer 7

    […] min-height es la propiedad adecuada para eso, pero claro IE6 no lo interpretaba. Entonces usabamos este hack. […]

  142. lordmarin

    Good hack :)
    Fantastic!
    I have resolved some problem

  143. ghou

    Thanks!It works fine in ie6 and ff1.5!

  144. Miss Kerry Turner - A Charmed Life » Techie stuff, part one - feel free to skip this one, non-techie readers!

    […] I was despairing of ever getting this to work, when I stumbled upon this post by Dustin Diaz. At first I thought it looked too good to be true - it’s so simple and clean! - but I’m delighted to say that it works, and works well. Basically, he’s worked out how to tell browsers that do support min-height to use it, and to tell IE 6 to use height instead - all in three lines of CSS! […]

  145. Cátia

    I just want to join the choir and say THANK YOU!!!

  146. Brandon

    Just for fun, I always call this “The !important Diaz Hack”. I think it’s catchy enough.

  147. Ben

    GENIUS!!! YOU saved my life and HOURS of manual resizing. You rock :)

  148. Drew

    Its not even close to working for me….I mean in IE 6 it was awesome but IE 7 its all jacked up.

    i have my css like this:
    #ok {
    min-height: 99%;
    height:auto !important;

    }

    and i set my

    and it doesnt do it!!

  149. Jamie

    Very elegant, very nice, very thankyou.

  150. Amici

    Dustin the king ;) This is an important hack :)

  151. lb

    Thanks!! you is a great man!

  152. Jason Beaird

    Hey Dustin, just wanted to drop in and say I used this hack…again.

  153. pixelchutes

    Wow! Awesome work-around. This worked like a charm, just as described. I’ll take this any day over the JavaScript expression technique. Nice find.

  154. Trevor Powell

    Does this work with ems? I can’t see how it would. What about this case?

    div#container {
        width: 75em;
        min-width: 1000px;
    }
  155. Alps

    Can anyone try this with % instead of fix px?
    and try with IE7,FF,Safari

  156. fearlex

    love it !!! It worked perfect :D

  157. HEM

    hello, thanx a lot for fixing height problem IN FF,but it doesnt wrking here below in my code. as there are three div, left, right, and main( for content) , plz help !

    Untitled Document

    jkjh
    hjhgkj
    jkjh

    /* CSS Document */

    #container{
    margin:0 auto;
    height:100%;
    min-height:100%;
    width:800px;
    background-color:#CCCCCC;
    }

    html, body{
    height:100%;
    margin:0;
    border:0;
    }

    #height{
    min-height:100%;
    height:auto !important;
    height:100%;
    background-color:#006699;
    width:150px;
    border-right:1px dotted #fff;
    }#height1{
    min-height:100%;
    height:auto !important;
    height:100%;
    background-color:#006699;
    width:150px;
    border-right:1px dotted #fff;
    float:right;
    }
    #main{

    background-color:#CC9933;
    margin-left:150px;
    margin-right:150px;
    }

  158. Hosting linux

    Thanks for this hack :)
    Work perfectly ;)

  159. mario

    thanks a million!!!! this solved a whole day of mind boggling css fixing!!

  160. Jacksonville Web Design

    This is awesome! As Napolean Dynamite would say… “Flippin’ Sweet!” Very clean, logical, compact and elegant. Thanks a lot!

    Jim S.
    TenTonWeb.com
    http://tentonweb.com/
    Jacksonville, Florida USA

  161. Rik

    great! The team from Campagne Company like to thank you!

  162. Debbie

    Excellent - this is beautiful. Thank you.

  163. Hary

    Thanks!!!!! Works nice and looks good in code!

  164. Jerry

    The CSS below seems to work perfectly with IE7 and FF2. I had an issue with the auto not working in FF. Seems to work.

    min-height:400px;
    _height:auto !important;
    height:auto !important;
    height:400px;

  165. Edmond Chui

    Unfortunately, the original solution doesn’t work for me.

    Here is a solutions that works for me:

    selector
    {
    height: expression(parseInt(document.getElementById(”").clientHeight) > 500 ? “500px” : “auto”);
    }

  166. Edmond Chui

    Oops. My last posting was for max-height fix. :)

  167. Andy Brown

    Thanks… first page on google for min-height ie6… fixed my problem in 2 minutes!

  168. Colombia

    Excellent, This is the best hack to solve this problem.

  169. Z

    What can I say, but “Thanks a lot!”

  170. Mark

    This does not work with firefox 2.0!

  171. Steve Scott

    An absolute gem! First post on google, it solved my problem straight away.

    Added to the top of my bookmarks.

  172. vi

    One thing to mention is that this hack does not seem to work with tables/td’s in IE7 even if display: block is used. The solution (obviously and unfortunately) is to use additional div’s.

  173. Cameron

    Quite the miraculous solution. This one saved me from a lot of grief!

  174. Russell

    Thank you, thank you for this hack - i have been messing around with tricky image size property asp code and fudging it with css for weeks but your hack does the trick and SO simply!!!
    Wonderful, thanks a million.

  175. Victor

    great solution for static content, but how can i get this working for dynamic content?

    i am injecting content into my DIV’s innerHTML using AJAX (no page refresh). i seem to have a ‘chicken and egg’ scenario… i want to control the maximum width/height of my DIV (i.e. force scrollbars when max width/height reached), but to have auto width/height before the max is reached… the following works in FF but not in IE:

    overflow: auto;
    max-height: 250px;

    i tried the following in IE but it ends up just giving me a fixed height of 250px regardless of how long my content (innerHTML) was:

    min-height:250px;
    _height:auto !important;
    height:auto !important;
    height:250px;

    the following doesn’t work in IE because my DIV content is initially empty so my clientHeight always evaluates to 0, so i end up with height “auto” (i.e. no max height):

    height: expression(parseInt(document.getElementById(””).clientHeight) > 250 ? “250px” : “auto”);

    does anyone know a solution?

  176. Eman

    Very straightforward hack. Worked great in Firefox 2.0 and IE 6, thanks!

  177. philldo

    Great hack.
    Why have I now just found this.
    Thanks.

  178. Casper

    OMG, I love you.

  179. Noel

    Hi, Just wanted to say thanks, fast solution that works great!

  180. Fontastic

    if there’s one thing i hate, it is spending way too much time trying to find ways around browser incompatibilities - it is a huge time waste when I could be say…spending that same time productively creating a Flash game, creating a piece of software, or learning how a the A* algorithm works.

    So…THANK YOU VERY MUCH for this quick fix. Although it doesn’t work for IE5 (getting really old), it should be good enough for most purposes.

    Thanks very much.

  181. arabalar

    /* Simple fix so forum and topic lists always have a min-height set, even in IE6
    From http://www.dustindiaz.com/min-height-fast-hack */
    dl.icon {
    min-height: 35px;
    height: auto !important;
    height: 35px;
    }

    from phpbb.com

  182. raman

    Thank you, sir!

  183. Erin Potter

    You just made me a very, very, happy woman!

  184. duniacyber

    Thank you for this solution, i already tried but still same i’m stuck
    but anyway thank again !!
    this is my site with error css www.duniacyber.com
    .gbrkiriadsbigdet {
    float:right;
    max-width:120px;
    max-height:80px;
    _height: auto !important;
    _width: auto !important;
    height: 80px;
    width: 120px;
    border:0;
    padding-bottom:1px;
    padding-right:3px;
    padding-top:1px;
    }

  185. duniacyber

    Now I have found the solution…
    Thx a lot, God bless u
    this is worling properly for ie 6 7 ff 1.5 2
    .gbrkiriadsbigdet {
    float:right;
    max-width:120px;
    max-height:80px;
    height: expression(this.height >= this.width && this.height > 80 ? 80 : true);
    width: expression(this.height 120 ? 120 : true);
    border:0;
    padding-bottom:1px;
    padding-right:3px;
    padding-top:1px;
    }

  186. Tim

    Thanks Mate!
    Just a shame it took me 2 hours and testing several other hacks to find yours

  187. urs

    selector {
    min-height: 200px;
    height: auto !important;
    height: 200px;
    }

    my selector is a div that can contain different amounts of content. if the content is more than 200px high the rest gets cut out.

    can anyone help me?

    the code:

    .textbox {
    border: solid #6e6e6e;
    border-width: 1px;
    background: #eeeeee;
    width: 708px;
    min-height:200px;
    height:auto !important;
    height: 200px;
    float: left;
    overflow: hidden;
    padding-right:10px;
    padding-left:10px;
    padding-top:10px;
    padding-bottom:10px;
    }

  188. urs

    sorry, please forget the above posting. without overflow: hidden; it worked fine. sorry again, stupid me.

    GREAT FIX!!

  189. Steve

    Thanks for this graceful workaround…i love this so much i want to take it behind the middle school and get it pregnant.

  190. Alex

    You’re the one.

  191. Hessner

    Thank you.

  192. Motorhomes

    Thanks for the solution!

  193. bmc

    sooo pretty, thanks

  194. Jason Beaird

    …and again.

  195. Astamei

    Thanks a lot !
    Wonderful job!

  196. Resolutions for Liquid Layouts and JS Libraries - Irish SEO, Marketing & Webmaster Discussion

    […] Originally Posted by Cormac Hi guys, I’m in the middle of developing a liquid css layout which gets really skewed up when the user resizes their browser to 800*600 or less. I have heard that some JS libraries such as prototype.js and jquery can help prevent fluid css breaking during browser resizing. You should be able to fix this easily by setting a min-width value of 800px (or other) on the wrapper element of your layout. There are some straight-forward hacks for getting min/max-/width/height to work on IE. Min-Height Fast Hack […]

  197. Sin Ideas » Internet Explorer y max-height

    […] Primero encontré un hack de como emular la propiedad min-height, pero no me servía para lo que quería. Encontré una librería que según decía resolvería mi problema, pero por alguna razón no funcionó. […]

  198. GameBoar

    Great stuff!

    This simple hack has saved me alot of headaches.

  199. Taavi

    You’re all OK with this not validating?

  200. oooooogoo

    ooooogoo pleased with hack! ooooogoo make nicenice web page now.

  201. Daniel

    Thank you! Fantastik solution (fyi works with em)!

  202. arsenalist

    Great post, saved me headaches….

  203. Irish Vortex

    So simple and it works great.
    Thanks!

  204. Chris

    Thanks, great solution!

  205. Sean Fritz

    I can confirm that this works on Opera 9.2,9.5; Firefox 2; and, most importantly, IE6 (can’t test IE7 at the moment). I cringed at mangling my html to get min-height to work, but your solution worked just by adding a couple css rules (though I doubt my css sheet will be passing any validation tests)!

    Thanks

  206. Kero

    Dustin,

    many, many thanks! You’re the best. :D

    -K.

  207. n0xie

    Thanks you have saved me a lot of headache with this little hack!

  208. Casaba

    Thank you. Still works perfectly–and is still needed with IE!–two years later.

  209. Barry

    Pulling hair out. FF2 still won’t set the length of my container to more than the viewport (ie to be long enough for all the content):

    In my CSS I set the height for the html (cos that is the parent and the parent must have a height for the container to inherit, height set for body and min-height set for container. I’m running out of options, all of the above versions don’t seem to do it. I’m going wrong and can’t seem to see it. Any help would be VERY welcome! Broken example here: www.barrythomas.co.uk/broken.html

    
    html {height: 100%;}
    
    body {
    height: 100%;
    color:#333;
    margin: 0px 10px 0px 10px;
    background-color:white;
    padding:0px;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 76%;
    background-image: url(background.gif);
    text-align: center;
    }
    
    #container
    {
    min-height:100%;
    margin: 0 auto;
    padding: 20px;
    background-color:#FFF;
    width: 680px;
    text-align: left;
    }
    
    #content
    {
    float: left;
    width: 460px;
    }
    
  210. bay of islands hotels

    To Barry,
    Try putting a clearing div below your content, but before the end of your containing div. Eg.
    [code]
    in stylesheet:
    .clear {clear: both;padding-bottom: 1px; margin-bottom: -1px; height:0;}

    in html:
    [/code]

  211. bay of islands hotels

    @ Barry
    Let me try that again with rtfm enabled:

    
    .clear {clear: both;padding-bottom: 1px; margin-bottom: -1px; height:0;}
    
    
  212. Barry

    UPDATE: A guy called splitlife just saved my brain. He told me to put this into the HTML, just inside my container :

    and to put this in the CSS:

    .clear {clear: both;padding-bottom: 1px; margin-bottom: -1px; height:0;}

    I more or less understand what is happening and I thank him from the bottom of my boots.

  213. Paul Andrews

    Thanks so much - god knows why this works but it works in everything a beauty!

  214. Dude

    You are a friggin’ genious. Thx a ton.

  215. Scott Taylor

    This saved me :) Thank You!
    I have tested in IE7 and Firefox/2.0.0.7

  216. Adrian

    Gaahh, thank you so much for this..! I’ve been bustin’my ass with workaround up until now.. At the moment I was stuck with a particular problem with which my usual solution didn’t work. This doesn’t only fix this problem but any future issues as well! Thanks a million ;D

  217. Herjan

    Very nice :D

    Quick, easy and works ;)

  218. paulb

    Thanks for getting to the point with this hack, and not going on forever wasting peeps time!

  219. Thomas V.

    I confirm this is working with
    - firefox version v.2.0.0.8
    - internet explorer v.6.0
    - internet explorer v.7.0

  220. dude

    WHY DIDN’T I THINK OF THIS?

  221. Dansgalaxy.co.uk

    Thanks alot! i just noticed that min-width dont work for ie6 and foudn this with a quick google very nice and very simple :)

    Ill bookmark this site too!
    Dan

  222. Vishal Agarwala

    Genius!

  223. mranderson

    Hi! I want to try this in my solution, but I just have a question: In IE6, my min-height is set to 400px and I want my container to stretch dependent of the amount of the content. Is it just to set the height to 400px and the content will override the set of the height?

  224. Rob

    very sorry, I seem to have messed up with the code example

  225. Olmec

    Cool. Just what I was looking for! Keep up the good work :)

  226. Cormac

    Thank you! More than 2 years after the original post your hack still works :)

  227. Marcello

    It’s not working for me.
    on IE6 it works nicely but on FF 2.0.0.10 the height of the div is fixed an not stretching with the content.

    M

  228. Leyton Jay

    This works a treat! Wish I’d thought of it!

    Hopefully you should see this in action at rentokil-initial.bb in mid Dec 2007 and on all Rentokil-Initial country sites around the globe in early 2008.

  229. Cocowalla

    Damn, that it genius! Many thanks!

  230. Jason

    I like to avoid using the “!important” element, and any css expressions “height: expression(document.body.clientHeight ? “300px” : “auto”);” whenever possible. Perhaps, it’s just for clean code, and to avoide problems. So, what are the alternatives. I suggest you use a separate IE6 css file to change all “min-height” elemnts to “height”. You might also try using padding to fill in your container. The other solution is to use padding to fill in your container with an auto height.

  231. Jasal Vadgama

    That’s genuis! Worked like a charm!

  232. Hrishi

    I have a left navigation in my website wrapped in a div container. I need this navigation to stretch to full height (till footer) even if there is’nt enough content to go till the bottom. Can anyone tell me how to acheive this?

  233. Chris Olberding

    thanks helped me out tonight

  234. Jordan

    Nice hack, Dustin!

    My preferred method for this is to put the height value in a separate, IE-only stylesheet, imported by conditional comments; other browsers don’t see the contents of this file, and so there’s no need for the preceding !important rule. It also helps to keep all of my IE hacks together in one place, which I find useful.

    Concerning max-width, there are a couple of solutions I’ve found to make it work in IE. Let’s say this is what we’re trying to do:

    min-width: 600px;
    width: 80%;

    My first attempt looked something like this:

    width: expression((this.clientWidth <= 600) ? "600px" : "80%")

    In other words, if the width of this element turns out to be less than 600 pixels, set the width to 600 pixels; otherwise, set it to 80%. Unfortunately, this method doesn’t resize nicely, but I later found a way which does:

    width: expression((this.parentNode.offsetWidth < 625) ? "500px" : "80%");

    The first number above is usually equal to width divided by min-width (in this example, 500 / 0.8), which is the width of the parent element at the point when the min-width value should be used. (Sometimes you will need to play around with it to account for padding or borders, but it shouldn’t take long to find.) In English, if the parent element’s width is less than this value, we use the minimum width of the element; otherwise, use the normal width value.

    Hopefully this will help some of the people who are looking for answers to the min-width problem without adding lots of extra weight to their HTML!

  235. Jordan

    (Sorry Dustin, I could have sworn I have wrapped my tags properly…)

  236. so late

    this hack is good but does not work with overflow:hidden which is a big problem for me. can anyone help?

  237. Guy

    This fix does the trick.

  238. jan

    Like “So late” said. It doesn’t work with overflow:hidden , also a problem for me…

  239. Jan

    Wow, even works with my percent values. You made my day! (and probably future days too)
    I used to take this one but it’s not valid:

    height:expression(this.scrollHeight > 100 % “auto”:”100%”);

  240. Steffi

    Thank you so very much! Worked perfectly for me and saved my life ;-) well, at least my nerves…

  241. Poster

    awesome tip … would have never come up with such a thing myself … thanks a million! :-)

  242. maestric

    Thanks, man. It’s simple and works great.

  243. Eric Watson

    Is there a way to make this work with a completely centered layout. That is centered vertically and horizontally. Once I put your code in the css, it works but is no longer centered in the browser window because it can no longer stretch to stay centered. Do you know of a fix for that? Thanks a lot!

  244. Mike

    I’m trying to get this working with percentages, but I’m having a bunch of problems. Main one seems to be when you nest these. For example, I have a #wrapperdiv that I want to be at least 100%, inside of which I have a banner (of known height) and a #contentdiv that should take up the remaining vertical space. I can not set #contentdiv min height.

  245. Viktor

    Thank you! This csshack worked very good and saved me time and nerves!

    Thx :)

  246. Cepera

    Thanks! It is very good way to fuck (hack) IE6. And with no expressions, no javascript.

  247. Ulti

    You will want to add in an overflow:visible; for when the min-height is smaller than the content in IE6.

  248. Jez

    thanks for this 5 second life saver!

  249. Octopus Ink » Blog Archive » Min Height full height.

    […] these problems stem from the way in which I’m setting min-height. I use Dustin Diaz’s Min-height Fast Hack which works great for one div, or for nested divs with ‘px’ heights, but it seems to […]

  250. gast

    Dude,

    Thanks for sharing, it works like a charm.

  251. Vitamin Features » Streamline your forms with widgets

    […] Also, keep observers may have noticed my use of min-height for the dd_wrapper container. IE6, of course, doesn’t support this attribute but I’ve had success using Dustin Diaz’s Min-Height Fast Hack. […]

  252. Heather

    Thanks a ton! Brilliant in its simplicity.

  253. =IceBurn=

    Great hack! Thanks! :)

  254. Nikos

    Yep I digg everything above

  255. Matt

    You just cured my headache!

  256. sağlık

    ie7 why ?

    Please help!

  257. jara

    thanks, thanks, thanks !!!!

  258. Zaid

    Dude, you saved my life…

  259. ck

    I would make love to this hack if it were human. It just bailed me out big time.

  260. Maxwell Scott-Slade

    Just to note, in IE6 this hack is not compatible with clearfix (as in the positioniseverything hack).

  261. Devang Solanki

    Dear Friend

    Same thing i was trying for min-width and all but its not working ?

    i am using for testing IE7, FF 2.0.0.12

    can you guide me regarding that

  262. shawn rider dot com » Blog Archive » Links for March 12th, 2008

    […] Min-Height Fast Hack - A handly little css hack to get ie6 to do min-height properly. Share this post: These icons link to social bookmarking sites where readers can share and discover new web pages. […]

  263. Gary

    Perrrrfect! Fix a problem that popped up with a recent all CSS/XHTML design. Thanks, bud!

  264. Zeb

    Excellent man!! Thanks a million.. that was just great and easy fix

  265. happy happy

    Oh my! I just can’t understand one thing - how come I’ve never heard of this trick before?! It worked like a charm, and it doesn’t hurt that it’s so elegant.

    Well done and a huge “thank you”!

  266. Budhi

    Nice..thanks for solution

  267. Turhan

    Perfect mate. Works a treat. I guess we still need these little hacks seeing as though there are still a load of people using IE6. Nice one.

  268. otomobil

    min-height:500px;
    height:auto !important;
    height:500px;

    important! attribute overwrites any other styling, so it allows the hack to work.

  269. James

    Awesome…been screwing with this problem for a few hours now, this worked great…2 and a half year old post, and it helped me immensely…don’t know why this isn’t more widely known…awesome find.

  270. Kokesh

    Thanks. I hope this is the last year I have to deal with that thing called IE6. Thank god that they started to do something about their browser (until now maybe better called internet-raper) in Microsoft.

    I have Firefox for many years now, IE is just pain in the a** :)

  271. ogsolution

    This is very easy to understand. Thank you.

  272. Bimal

    This solved me, at least the design-display problem in Dreamweaver. In real-time production, I can safely upload separate css hacks for different browsers.

  273. Micke

    Great tip man, it gets used on a daily basis =)

  274. Musa

    I wonder why it is not working in my Firefox v2? this is my code:

    Someone please help!

  275. Tom

    this works perfect on my website !
    Thx , was looking for this a long time …

  276. Mickey Knox

    Thanks, this worked perfectly. I love clean CSS fixes that get rid of the need for IE conditional comments.

  277. Holly

    You, sir, are now my hero.

  278. Guy

    I’m on the same page with James there. Two and a half years and this fix not only works, but is still needed! Not even IE 7 has this very important feature!

    I have a table in a set-height div.
    The table is split into 3 rows. The top two have a varying amount of data and so cannot have set heights. The last needs to expand to fill what is missing and so cannot have a set height either.
    I gave the top two a min-height and set the bottom row’s height to auto, and used the “hack” explained here and everything works perfectly.

    It is most unfortunate that the company I am working at build their website to be internet explorer-oriented (as in, most things in it won’t even work with firefox)… I try to put good code and css in where-ever I can but the base is rotten.

    IE8 seems to be a good many steps in the right direction but, as I understand it, they will be choosing which standards they will be complying to.

  279. IE CSS Bugs That’ll Get You Every Time - CSS-Tricks

    […] 6 treats the regular height property like modern browsers treat min-height, so you can use a “hack” to fix it. I call it a “hack”, because I don’t really consider it a hack […]

  280. mStudiosTALK | IE CSS Bugs That’ll Get You Every Time

    […] 6 treats the regular height property like modern browsers treat min-height, so you can use a “hack” to fix it. I call it a “hack”, because I don’t really consider it a hack […]

  281. Zack

    This is genius. Thank you for sharing.

  282. Min-Height - very usefull

    […] the cool thing is that is cross-browser! I found this code at with imagination. Besides this code there are much more helpful […]

  283. gyokusai

    Dang, this is good. Dustin, you are teh man!

    Thanks & Cheers,
    ^_^J.

Leave a Reply

Phone Number:

If you're about to post code in your comment, please wrap your code with the tag-combo <pre><code>. Also please escape your html entities - otherwise they will be stripped out. I recommend using postable.

Get "JavaScript Design Patterns"

"As a web developer, you'll already know that JavaScript™ is a powerful language, allowing you to add an impressive array of dynamic functionality to otherwise static web sites. But there is more power waiting to be unlocked--JavaScript is capable of full object-oriented capabilities, and by applying OOP principles, best practices, and design patterns to your code, you can make it more powerful, more efficient, and easier to work with alone or as part of a team."

Buy JS Design Patterns from Amazon.com Buy JS Design Patterns from Apress

Flickr

Submit a Prototype

All content copyright © 2003 - 2007 under the Creative Commons License. Wanna know something? Just ask.

About | Archives | Blog Search