Q:

"Height: 1;" miraculously makes everything work in Chrome and IE. Unable to find alternative solution

So I am trying to make four columns with the same height. There should be some padding and visually they should look with the same height.
Experimenting different solutions I've found something strange happening when one of the div's has "height: 1;". Since this isn't valid css, to my knowledge, the default value of 'auto' should be given to the div. But it doesn't display the same with value 'auto'.
Since I didn't get "height: 1" to work in jsFiddle, here is JsBin link: JsBin.
I've come here to get information on two things:

Why does "height:1;" make it work on Chrome and IE latest versions. What is happening?
What would be a possible valid html/css solution to get a result like this:

If somehow I could get the inner div inside the "display: table-cell" to be with height: 100% then the problem would probably be solved.

A:

It works because the page has no <!DOCTYPE html>. Chrome and IE are entering quirks mode, where height:1 is valid CSS (for height:1px) and this somehow fixes your layout in quirks mode.
Solution: Add <!DOCTYPE html> to the start of your file, and go from there.

