Let's Learn Something 4 - Setting Div Heights In Css

Since tundewoods has stolen my thunder by taking away from me "part 3", I will skip to part 4.

Many atimes, I will see sites that have their contents "bleed" through their DIV tags, for those who use CSS.  In particular, this problem tends to present itself in FF and not IE.  There is a reason for this:

In FF, once you set the height of a div to say, 600px, that div will never be flexible in height which means that if content is more than the 600px height, it bleeds through that DIV. In IE on the other hand, the 600px is regarded as a minimum height and so if the content is more than the 600px, the DIV expands accordingly.  However, if the content equates to a height of 595px for instance, the height of the DIV remains the same at 600px and you will notice the 5px (in this case) gap.

How to fix the problem as a cross-browser solution?
You could declare your style such that it looks like so:

The "!important" part is a FF hack and IE 6 and below will ignore this line and use the "min-height" and "height: 600px" lines.  The min-height just means exactly what it says, it's a minimum height.

Caveat:
Note that the line with "height: 600px !important" comes before the regular line "height: 600px". This is on purpose.  For the "!important" rule to work properly, you must declare it before its equivalent IE counterpart.

Did you find this useful?  If so, I will post more.

Thanks

Absolutely fantastic.usually i don't specify height, unless i need to.well done. As for the 'thunder stolen', be prepared to see more.

@webemarald,

Stay tuned.  That tutorial is on its way 

u say pricing ?

CSS hell hacked, wow that's so cool, 

every web designer has that nasty / firefox wahala

Thanks for the tutorial or will i say Hack