Min-Height Fast Hack
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 :)
October 27th, 2005 at 4:13 am
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.
November 1st, 2005 at 6:24 pm
Thank you for the no-frills min-height hack — it sure did the trick, and with no fuss whatsoever.
Cheers!
November 9th, 2005 at 7:59 pm
Very nice.
I would assume it works for min-width as well?
November 9th, 2005 at 11:26 pm
yes. it does. try it out.
November 15th, 2005 at 11:10 pm
Great little trick. I think it is cleaner and easier to understand than the child selector hack. Thanks!
November 30th, 2005 at 12:12 pm
This is great. This will save many headaches
December 7th, 2005 at 6:47 pm
Thank you! After much trial and error, this solution worked like a charm!
December 12th, 2005 at 7:20 am
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.
December 14th, 2005 at 3:14 pm
Thanks!
Simple & effective.
Best solution ever.
December 19th, 2005 at 5:25 pm
Works, thanks!
January 6th, 2006 at 1:22 pm
this works great! saved me a ton of agony!
January 15th, 2006 at 6:11 pm
Once again, I find something very useful on this site. Thanks.
January 26th, 2006 at 9:57 am
Brilliant solution. Thank you for sharing.
February 2nd, 2006 at 9:38 am
A good solution, unfortunately, having downloaded the IE 7 Beta 2 Preview it doesn’t seem that “IE7… [will]… also implement min-height”
February 8th, 2006 at 4:55 pm
This saved me!… Thank you very much =)
This site goes to my bookmarks
February 12th, 2006 at 3:38 am
Thank you. This solved my problem.
February 20th, 2006 at 1:42 am
Thanks Buddy,
I worked nice for me.
February 20th, 2006 at 1:43 am
sorry a typo
It worked nice for me.
February 20th, 2006 at 7:43 am
How about a solution that validates?
The proposal redefines the height value, which gives a warning when trying to validate your stylesheet.
February 28th, 2006 at 10:01 pm
Worked for IE6, but not in IE7 Beta 2. Anyone have an IE5-IE7 safe fix?
February 28th, 2006 at 10:16 pm
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?
March 4th, 2006 at 5:03 pm
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.
March 9th, 2006 at 2:24 pm
ABSOLUTELY BRILLIANT!!!
March 20th, 2006 at 1:31 pm
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…
March 20th, 2006 at 2:10 pm
@All: This will indeed work with IE7 once it’s out of beta :D
March 21st, 2006 at 7:57 pm
[...] 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! [...]
March 27th, 2006 at 3:03 am
thank you very much.it solves the problem i think.
April 13th, 2006 at 4:33 pm
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?
April 14th, 2006 at 12:16 am
Awesome fix, thanks for sharing. Can’t wait for MS to finally release a browser that actually follows the standards…
April 15th, 2006 at 4:20 am
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.
April 17th, 2006 at 2:51 am
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).
April 19th, 2006 at 3:40 pm
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.
April 19th, 2006 at 4:33 pm
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.
April 19th, 2006 at 8:37 pm
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.
April 19th, 2006 at 10:06 pm
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 :(
April 21st, 2006 at 8:21 am
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.
April 28th, 2006 at 8:05 am
Great!
April 30th, 2006 at 4:42 pm
Thank you *insert marriage proposal here*
Was hitting my brains out trying to get min-height to work - thank you, thank you :D
May 1st, 2006 at 10:52 am
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
May 7th, 2006 at 4:48 pm
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..
May 7th, 2006 at 10:05 pm
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.
May 13th, 2006 at 7:17 pm
Thank you so much for this…
searched for many many hours for such a fix
May 14th, 2006 at 5:20 pm
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
May 15th, 2006 at 3:58 am
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 …
May 17th, 2006 at 2:06 pm
The boys @ redmonkey would like to thank you for this nice solution for the annoying min-height problem!
May 21st, 2006 at 5:30 pm
Brilliant — ever so grateful, mate!
May 24th, 2006 at 1:24 pm
Thank you so much, You saved my day…
June 1st, 2006 at 7:55 pm
Much obliged, thanks for the useful hack.
June 12th, 2006 at 10:10 am
thanks
June 12th, 2006 at 7:41 pm
I was having problems with IE 7.0 and min height, but finding this site ur solution worked perfectly :)
June 21st, 2006 at 11:38 am
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.
June 22nd, 2006 at 12:25 pm
Excellent - I’ve previously used Grey’s “min prop” successfully but with some arsing around - this simplifies things and helps immensely; thanks…
June 25th, 2006 at 10:39 am
Thanks for this great hack, it really made things easier after having problems with IE for hours!
June 27th, 2006 at 10:20 am
Thanks a lot.
It works fine, and it’s easy to implement.
June 29th, 2006 at 1:20 am
Very nice! Thanks.
June 29th, 2006 at 6:52 am
Thanks a lot mate, that saved my butt! Clean and easy. I keep my fingers crossed for the IE7 case.
July 2nd, 2006 at 8:54 pm
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!
July 17th, 2006 at 3:20 pm
A bit late, but does it happen to work in IE7 Beta 3?
July 17th, 2006 at 7:12 pm
Yes. it works just as expected for IE7 since they’ve implemented everything correctly :)
July 20th, 2006 at 1:00 pm
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!
July 29th, 2006 at 7:23 pm
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
July 29th, 2006 at 9:05 pm
Whew, quick fix. thanks and Cheers!
August 4th, 2006 at 1:01 am
[...] ¿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. [...]
August 4th, 2006 at 5:19 am
[...] 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 [...]
August 29th, 2006 at 5:34 pm
Sheer Brilliance. IE is such an annoying browser so thanks for the fix :)
August 31st, 2006 at 8:57 am
Wonderful - thank you very much - this is another site bookmarked :)
September 6th, 2006 at 6:51 am
I know you’ve heard it a lot but…Thanks Dude!!!
September 7th, 2006 at 12:04 pm
Thank you very much…you have ended 2 days of headaches…
September 11th, 2006 at 10:17 am
Good CSS thanks. Will use it on the new website.
September 17th, 2006 at 9:37 am
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! :-)
September 19th, 2006 at 12:42 pm
BEST. HACK. EVER.
subtitle:
“In your face, min-height!”
September 19th, 2006 at 12:48 pm
[...] After falling upon this hack, how could I not post it? Thanks to Dustin Diaz for this amazingly simple and fast min-height hack! [...]
September 23rd, 2006 at 4:38 am
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.
September 24th, 2006 at 4:58 pm
thanx.. it solve my problem
September 28th, 2006 at 1:02 am
Before I made separate stylesheet for this issue!
Don’t call it a hack, it’s an “elegant solution”…
September 28th, 2006 at 2:02 pm
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.
September 29th, 2006 at 12:50 am
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).
September 29th, 2006 at 10:07 pm
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!
October 4th, 2006 at 6:45 am
Just wanted to add yet another thanks, this has saved the drywall in my office from another head-bashing.
October 4th, 2006 at 9:23 am
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.
October 8th, 2006 at 1:14 pm
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]
October 9th, 2006 at 2:15 am
I had to thank …. only wish I saw this earlier
October 9th, 2006 at 3:14 pm
thank. you. so. much.
October 10th, 2006 at 3:16 pm
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.
October 17th, 2006 at 9:46 pm
[...] /* ala http://www.dustindiaz.com/min-height-fast-hack */ selector { min-height:500px; height:auto !important; height:500px; } [...]
October 25th, 2006 at 4:28 pm
Here’s another
selector {
min-height: 300px;
height: expression(document.body.clientHeight ? “300px” : “auto”);
}
November 6th, 2006 at 9:41 pm
thanks. it works like a charm…
November 7th, 2006 at 2:25 am
Perfect solution. Thank you!
November 9th, 2006 at 1:45 am
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
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!
November 9th, 2006 at 8:50 am
THANK YOU!! that worked like a charm..no fuss whatsoever. this is a keeper for sure.
November 18th, 2006 at 10:58 am
Another satifised web designer.
thanks pal!
I gave your website credit in the ssheet since you didn’t name the hack -:)
November 21st, 2006 at 10:21 pm
thanks much
November 22nd, 2006 at 5:00 am
[...] 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. [...]
November 24th, 2006 at 2:35 pm
Thanks! It really works. Your solution helped me many times :)
November 28th, 2006 at 6:20 pm
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 http://www.cleanweb.co.nz
November 28th, 2006 at 9:50 pm
@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.
December 4th, 2006 at 4:37 am
Nice thing.. Help me a lot. Thanks a lot
December 5th, 2006 at 3:46 pm
Man, I love when things just work. Thanks for this!
December 13th, 2006 at 3:50 pm
Brilliant. I love you.
December 14th, 2006 at 12:17 am
Posted over a year ago and still a great tip. Thanks dude.
December 15th, 2006 at 11:57 am
Sweeeeeeeeeeeeet.
December 17th, 2006 at 7:26 pm
Cheers! simplicity is alwyas best and you’ve proved it!
December 19th, 2006 at 9:16 am
Thanks man, really helped, I hope Ie chokes and dies.
December 21st, 2006 at 8:37 am
Dude, that is awesome. Thank you. Much better than the other min-height hacks out there.
December 28th, 2006 at 1:01 pm
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
December 28th, 2006 at 2:45 pm
Awesome, this hack worked wonderfully. Thanks a bunch.
December 29th, 2006 at 4:45 pm
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.
January 2nd, 2007 at 6:14 pm
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.
January 3rd, 2007 at 10:23 am
Great dude. U saved me an awfull lot of time.
January 9th, 2007 at 8:37 am
Amazing!! I thought you need javascript for this. Thank you very much!
January 16th, 2007 at 12:14 pm
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!
January 18th, 2007 at 10:27 am
Does this hack work for percentages?
January 24th, 2007 at 9:24 am
this is not working for me. firefox still does not respond.
January 31st, 2007 at 10:04 am
Great trick, thank you!
February 1st, 2007 at 12:11 pm
Sweet. You’re a lifesaver
February 4th, 2007 at 6:26 pm
This “hack” was exactly what i needed, Microsoft’s IE sucks, it doens’t understand min-height:
Really nice!
February 5th, 2007 at 11:45 am
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!
February 12th, 2007 at 7:24 pm
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
February 17th, 2007 at 8:22 pm
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
February 21st, 2007 at 5:39 pm
Congratulations and thank you for saving my hair!
February 22nd, 2007 at 9:12 pm
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.
February 22nd, 2007 at 11:03 pm
Excellent!
After much searching & frustration, here’s something that actually works. The beauty of it is its simplicity.
Thanks.
February 23rd, 2007 at 10:01 am
Nice work! Simple and brilliant
February 23rd, 2007 at 12:01 pm
And here I was thinking that min-height just never worked at all. This completely saves my redesign. :) Great save, thanks!
February 24th, 2007 at 8:28 am
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.
February 26th, 2007 at 1:04 pm
I have no trouble getting min-height to work in IE7. What are you trying to use it in?
March 9th, 2007 at 3:14 pm
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?
March 11th, 2007 at 7:56 am
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.
March 14th, 2007 at 2:20 am
thanks a lot.
its a very good hack…
I stile haveing problem in opera 9.10.
do you know why?
March 14th, 2007 at 9:42 pm
Oh dear god. I think I love you.
Works brilliantly, thank you!
March 15th, 2007 at 5:02 am
Great :) it works. Thank you very much. You saved my neck!
March 15th, 2007 at 11:04 am
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!
March 18th, 2007 at 11:05 pm
Thank you! Thank you! Thank you! =D
March 21st, 2007 at 5:23 am
[...] Procurando por uma solução decente, a que me pareceu melhor foi a apresentada por Dustin Diaz: [...]
March 21st, 2007 at 9:44 pm
very neat fix Dustin!
March 23rd, 2007 at 5:21 pm
[...] Hier eine Lösung die ich auf http://www.dustindiaz.com/min-height-fast-hack gefunden habe: [...]
March 26th, 2007 at 5:51 am
Nice one,
just what i needed :)
April 9th, 2007 at 4:09 am
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.
April 9th, 2007 at 6:16 am
Very nice. Works fine. Good hack.
April 9th, 2007 at 11:49 pm
Thank you so much! I was cursing IE this evening but you solved my problem :)
April 10th, 2007 at 9:26 am
[...] min-height es la propiedad adecuada para eso, pero claro IE6 no lo interpretaba. Entonces usabamos este hack. [...]
April 11th, 2007 at 8:12 am
Good hack :)
Fantastic!
I have resolved some problem
April 15th, 2007 at 12:30 am
Thanks!It works fine in ie6 and ff1.5!
April 23rd, 2007 at 2:55 am
[...] 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! [...]
April 23rd, 2007 at 9:29 am
I just want to join the choir and say THANK YOU!!!
April 27th, 2007 at 10:02 am
Just for fun, I always call this “The !important Diaz Hack”. I think it’s catchy enough.
April 29th, 2007 at 1:55 pm
GENIUS!!! YOU saved my life and HOURS of manual resizing. You rock :)
May 1st, 2007 at 6:37 pm
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!!
May 2nd, 2007 at 3:13 am
Very elegant, very nice, very thankyou.
May 3rd, 2007 at 9:02 am
Dustin the king ;) This is an important hack :)
May 9th, 2007 at 4:01 pm
Thanks!! you is a great man!
May 11th, 2007 at 10:01 am
Hey Dustin, just wanted to drop in and say I used this hack…again.
May 22nd, 2007 at 8:23 am
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.
May 23rd, 2007 at 4:55 pm
Does this work with ems? I can’t see how it would. What about this case?
May 24th, 2007 at 1:34 am
Can anyone try this with % instead of fix px?
and try with IE7,FF,Safari
May 24th, 2007 at 8:18 am
love it !!! It worked perfect :D
May 25th, 2007 at 2:46 am
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;
}
June 5th, 2007 at 4:08 am
Thanks for this hack :)
Work perfectly ;)
June 7th, 2007 at 7:44 am
thanks a million!!!! this solved a whole day of mind boggling css fixing!!
June 14th, 2007 at 8:12 pm
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
June 17th, 2007 at 7:06 am
great! The team from Campagne Company like to thank you!
June 23rd, 2007 at 1:18 pm
Excellent - this is beautiful. Thank you.
June 25th, 2007 at 10:10 am
Thanks!!!!! Works nice and looks good in code!
June 27th, 2007 at 12:34 pm
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;
June 27th, 2007 at 3:45 pm
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”);
}
June 27th, 2007 at 3:46 pm
Oops. My last posting was for max-height fix. :)
June 29th, 2007 at 1:55 am
Thanks… first page on google for min-height ie6… fixed my problem in 2 minutes!
June 29th, 2007 at 9:02 pm
Excellent, This is the best hack to solve this problem.
July 1st, 2007 at 11:06 am
What can I say, but “Thanks a lot!”
July 3rd, 2007 at 11:56 am
This does not work with firefox 2.0!
July 8th, 2007 at 12:47 pm
An absolute gem! First post on google, it solved my problem straight away.
Added to the top of my bookmarks.
July 8th, 2007 at 8:30 pm
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.
July 9th, 2007 at 1:18 pm
Quite the miraculous solution. This one saved me from a lot of grief!
July 11th, 2007 at 10:27 am
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.
July 12th, 2007 at 10:12 am
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?
July 13th, 2007 at 10:07 pm
Very straightforward hack. Worked great in Firefox 2.0 and IE 6, thanks!
July 19th, 2007 at 8:10 pm
Great hack.
Why have I now just found this.
Thanks.
July 20th, 2007 at 12:29 am
OMG, I love you.
July 21st, 2007 at 10:46 am
Hi, Just wanted to say thanks, fast solution that works great!
July 22nd, 2007 at 4:59 am
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.
July 29th, 2007 at 7:38 pm
/* 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
August 1st, 2007 at 6:49 pm
Thank you, sir!
August 4th, 2007 at 2:43 pm
You just made me a very, very, happy woman!
August 7th, 2007 at 2:19 am
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 http://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;
}
August 7th, 2007 at 2:53 am
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;
}
August 13th, 2007 at 4:58 am
Thanks Mate!
Just a shame it took me 2 hours and testing several other hacks to find yours
August 13th, 2007 at 6:10 pm
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;
}
August 13th, 2007 at 6:24 pm
sorry, please forget the above posting. without overflow: hidden; it worked fine. sorry again, stupid me.
GREAT FIX!!
August 19th, 2007 at 1:16 pm
Thanks for this graceful workaround…i love this so much i want to take it behind the middle school and get it pregnant.
August 19th, 2007 at 2:57 pm
You’re the one.
August 24th, 2007 at 1:09 pm
Thank you.
August 27th, 2007 at 6:03 am
Thanks for the solution!
August 28th, 2007 at 9:13 am
sooo pretty, thanks
August 28th, 2007 at 10:55 am
…and again.
August 29th, 2007 at 7:59 pm
Thanks a lot !
Wonderful job!
August 30th, 2007 at 5:54 am
[...] 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 [...]
September 1st, 2007 at 4:42 am
[...] 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ó. [...]
September 2nd, 2007 at 6:22 am
Great stuff!
This simple hack has saved me alot of headaches.
September 3rd, 2007 at 7:09 am
You’re all OK with this not validating?
September 3rd, 2007 at 10:52 pm
ooooogoo pleased with hack! ooooogoo make nicenice web page now.
September 7th, 2007 at 9:18 am
Thank you! Fantastik solution (fyi works with em)!
September 9th, 2007 at 11:30 am
Great post, saved me headaches….
September 11th, 2007 at 10:10 am
So simple and it works great.
Thanks!
September 13th, 2007 at 9:50 am
Thanks, great solution!
September 14th, 2007 at 2:17 am
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
September 18th, 2007 at 8:58 am
Dustin,
many, many thanks! You’re the best. :D
-K.
September 19th, 2007 at 12:58 am
Thanks you have saved me a lot of headache with this little hack!
September 27th, 2007 at 9:09 am
Thank you. Still works perfectly–and is still needed with IE!–two years later.
October 8th, 2007 at 1:15 am
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: http://www.barrythomas.co.uk/broken.html
October 9th, 2007 at 6:24 am
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]
October 9th, 2007 at 6:25 am
@ Barry
Let me try that again with rtfm enabled:
October 9th, 2007 at 7:31 am
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.
October 11th, 2007 at 2:40 pm
Thanks so much - god knows why this works but it works in everything a beauty!
October 12th, 2007 at 2:01 pm
You are a friggin’ genious. Thx a ton.
October 15th, 2007 at 9:19 pm
This saved me :) Thank You!
I have tested in IE7 and Firefox/2.0.0.7
October 18th, 2007 at 1:11 am
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
October 20th, 2007 at 2:39 am
Very nice :D
Quick, easy and works ;)
October 23rd, 2007 at 4:39 am
Thanks for getting to the point with this hack, and not going on forever wasting peeps time!
October 31st, 2007 at 2:35 am
I confirm this is working with
- firefox version v.2.0.0.8
- internet explorer v.6.0
- internet explorer v.7.0
October 31st, 2007 at 10:23 am
WHY DIDN’T I THINK OF THIS?
November 11th, 2007 at 4:41 am
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
November 15th, 2007 at 10:49 pm
Genius!
November 18th, 2007 at 8:24 am
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?
November 19th, 2007 at 10:19 am
very sorry, I seem to have messed up with the code example
November 22nd, 2007 at 6:17 pm
Cool. Just what I was looking for! Keep up the good work :)
November 26th, 2007 at 10:55 am
Thank you! More than 2 years after the original post your hack still works :)
November 28th, 2007 at 7:37 am
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
December 4th, 2007 at 8:56 am
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.
December 11th, 2007 at 12:51 pm
Damn, that it genius! Many thanks!
December 16th, 2007 at 6:32 pm
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.
December 18th, 2007 at 5:34 am
That’s genuis! Worked like a charm!
December 20th, 2007 at 11:31 pm
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?
December 22nd, 2007 at 1:14 am
thanks helped me out tonight
December 24th, 2007 at 7:25 pm
Nice hack, Dustin!
My preferred method for this is to put the
heightvalue 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!importantrule. 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-widthproblem without adding lots of extra weight to their HTML!December 24th, 2007 at 7:27 pm
(Sorry Dustin, I could have sworn I have wrapped my tags properly…)
January 6th, 2008 at 8:46 pm
this hack is good but does not work with overflow:hidden which is a big problem for me. can anyone help?
January 9th, 2008 at 12:59 pm
This fix does the trick.
January 12th, 2008 at 8:55 am
Like “So late” said. It doesn’t work with overflow:hidden , also a problem for me…
January 14th, 2008 at 3:04 pm
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%”);
January 17th, 2008 at 4:09 am
Thank you so very much! Worked perfectly for me and saved my life ;-) well, at least my nerves…
January 21st, 2008 at 2:27 am
awesome tip … would have never come up with such a thing myself … thanks a million! :-)
January 22nd, 2008 at 3:50 pm
Thanks, man. It’s simple and works great.
January 24th, 2008 at 3:19 pm
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!
January 28th, 2008 at 7:57 pm
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.
January 30th, 2008 at 12:52 am
Thank you! This csshack worked very good and saved me time and nerves!
Thx :)
January 30th, 2008 at 2:41 am
Thanks! It is very good way to fuck (hack) IE6. And with no expressions, no javascript.
February 5th, 2008 at 10:28 am
You will want to add in an overflow:visible; for when the min-height is smaller than the content in IE6.
February 7th, 2008 at 9:14 am
thanks for this 5 second life saver!
February 10th, 2008 at 9:15 pm
[...] 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 [...]
February 21st, 2008 at 4:35 am
Dude,
Thanks for sharing, it works like a charm.
February 26th, 2008 at 7:47 pm
[...] 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. [...]
February 27th, 2008 at 2:39 am
Thanks a ton! Brilliant in its simplicity.
February 28th, 2008 at 7:32 am
Great hack! Thanks! :)
February 28th, 2008 at 10:23 am
Yep I digg everything above
March 4th, 2008 at 7:38 am
You just cured my headache!
March 8th, 2008 at 5:02 pm
ie7 why ?
Please help!
March 9th, 2008 at 3:02 pm
thanks, thanks, thanks !!!!
March 10th, 2008 at 8:58 am
Dude, you saved my life…
March 12th, 2008 at 5:37 am
I would make love to this hack if it were human. It just bailed me out big time.
March 12th, 2008 at 9:11 am
Just to note, in IE6 this hack is not compatible with clearfix (as in the positioniseverything hack).
March 12th, 2008 at 8:49 pm
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
March 12th, 2008 at 9:01 pm
[...] 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. [...]
March 14th, 2008 at 9:43 am
Perrrrfect! Fix a problem that popped up with a recent all CSS/XHTML design. Thanks, bud!
March 16th, 2008 at 8:36 pm
Excellent man!! Thanks a million.. that was just great and easy fix
March 21st, 2008 at 2:57 pm
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”!
March 21st, 2008 at 11:27 pm
Nice..thanks for solution
March 26th, 2008 at 7:02 am
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.
March 27th, 2008 at 9:18 am
min-height:500px;
height:auto !important;
height:500px;
important! attribute overwrites any other styling, so it allows the hack to work.
April 2nd, 2008 at 9:15 am
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.
April 6th, 2008 at 4:38 am
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** :)
April 7th, 2008 at 12:49 am
This is very easy to understand. Thank you.
April 7th, 2008 at 5:03 am
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.
April 8th, 2008 at 8:14 am
Great tip man, it gets used on a daily basis =)
April 9th, 2008 at 8:14 am
I wonder why it is not working in my Firefox v2? this is my code:
Someone please help!
April 15th, 2008 at 4:54 am
this works perfect on my website !
Thx , was looking for this a long time …
April 19th, 2008 at 7:54 am
Thanks, this worked perfectly. I love clean CSS fixes that get rid of the need for IE conditional comments.
April 22nd, 2008 at 1:49 pm
You, sir, are now my hero.
April 23rd, 2008 at 1:43 am
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.
April 23rd, 2008 at 6:01 am
[...] 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 [...]
April 23rd, 2008 at 10:13 pm
[...] 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 [...]
April 24th, 2008 at 2:37 pm
This is genius. Thank you for sharing.
April 30th, 2008 at 9:12 pm
[...] the cool thing is that is cross-browser! I found this code at with imagination. Besides this code there are much more helpful [...]
May 2nd, 2008 at 2:37 pm
Dang, this is good. Dustin, you are teh man!
Thanks & Cheers,
^_^J.
May 15th, 2008 at 8:11 am
Thanks so much.. it really works. Umbelievable.. I have been searching for this for ages!
June 9th, 2008 at 2:17 am
Thank you!!! You saved me neverending hours of blaming explorer 6!!!
June 12th, 2008 at 11:52 am
You rock dude. Don’t know how you figured it out, but great stuff.
June 16th, 2008 at 12:40 pm
Ha! You posted this in September, 2005 and I stumbled upon it in June 2008. A fine job indeed.
June 18th, 2008 at 11:39 am
BRILLIANT!!!!!
June 25th, 2008 at 1:37 am
This was just the fix I needed. Although I am not entirely sure what it does, it is much better than putting extra DIV tags in just to make it work with IE6. Cheers!
July 8th, 2008 at 1:54 am
[...] you can use various workarounds (JS Expressions); and to simulate min-width you can even use a pure CSS-solution. But what happens if the user’s browser doesn’t support JavaScript? Well, in this case [...]
July 8th, 2008 at 7:01 am
[...] you can use various workarounds (JS Expressions); and to simulate min-width you can even use a pure CSS-solution. But what happens if the user’s browser doesn’t support JavaScript? Well, in this case a [...]
July 13th, 2008 at 6:12 am
Great solution! Helped to resolve margins and paddings inconsistency.
July 16th, 2008 at 7:02 pm
[...] I enter the realm of CSS hacks. Using a min-height hack combined with advanced CSS selectors that aren’t understood by IE6 and less, I combine the [...]
July 26th, 2008 at 10:39 am
THANK YOU!!! I’ve gotten so frustrated looking for a hack, but yours actually works! You have no idea how happy those three lines of CSS have made me!
bookmark! =D
July 31st, 2008 at 12:59 am
Hah, man you’re great! really nice solution
and 3 years is quite a life for trick))
August 4th, 2008 at 8:31 am
EXCELLENT!!! I wish I had come across this MONTHS ago… I just chanced upon it now and it works GREAT!!!! Thank you a million times over:))
August 7th, 2008 at 1:46 pm
Why can’t all browsers just get along? Thanks for the trick.