Monday, December 3, 2012

Day 3 : Height calculation in CSS

One of my colleagues posed an interesting problem he found in CSS - http://jsfiddle.net/gbhasha/a2X5W/14/. When you set the height of an element in percentage value and the parent has a min-height set, the child element doesn't get any height, which was kind of weird (as opposed to common sense)

After reading through the CSS specs, we found out that only height property of the parent is considered while calculating the height of the child element but not min-height or max-height

I think the best way to understand the CSS specs is to try to build a browser yourself. As web craftsmen, we sometimes forget about the specs and follow what all is given in popular blogs and magazines.