The problem
In a fixed width layout it is simple to specify both the width and the height of an element, but what we want in this example, is to specify the with and height of an element as percentages, that are related btween them, and not the container.
The normal way of delivering iconography on websites was traditionally the use of bitmap formats such as PNG. They're quick and direct, and they ensure out final results.
The use of web fonts have given us another alternative. By definition, they're scalable and resolution-independent. No need to specify higher resolution graphics for high resolution screens.
Lets see some examples:
Can be consider weird, that a layout as simple as our content vertical centered, and our footer always at the bottom, can be so hard to create without javascript, or hard code css pages.
But after some research, and a little of frustration, specially, trying to keep internet explorer compatibility, here is a small css code who will allow our footer to be always visible on the bottom, and our content centered on the middle of the browser.
Time ago I stumbled across a review of James Edward's article The Art and Science of JavaScript Games.
He had the idea to write a 3D JavaScript / DHTML maze game, using CSS borders to create triangles.
Since then, I realice the power of css borders to create geometrical figures. This allow me to forget about images, and create the geometric shapes with only a few lines of css.
