Anyone who has even the slightest pulse of web design trends for the past few years has seen the dramatic increase in grid based designs. My site is a testament to the truth of that trend. I personally am glad to see this trend grow because it has brought so much continuity and simplicity to web design.

A List Apart has taken this trend one step further by posting a recent article about how to create a fluid grid based layout. When I first skimmed through the article last night, I knew that my mind was about to be blown. The articles author, Ethen Morcotte (who works for Airbag Industries) pointed out that this who concept was not only extremely feasable, but it can be accomplished and managed by the most novice of web developers, since it utilizes the oh so finicky em.

It’s all in the em’s
I do not use em’s as a designer, mainly because I am self taught and I never learned the foundation rule that applies to them (see quote below). But I recently developed a site for a client whose previosu designed utilized them heavily, so I thought I would give it a shot. I knew it was what all the big shot CSS developers used so I figured I would put on my big boy pants and give it a shot. It didn’t quite turned out how I wanted, the font sizes were so inconsistant that I scrapped it and went pack to the trusty px. I was unsuccesful at implemnting the em in my CSS because I did not know this foundation rule (however, Just for the record, I did observe/notice it, but couldn’t quite get my head around it):

the actual size of an element’s em is computed relative to the font-size of its parent element

This was the aha moment for me. It seemed to be the aha moment for Ethen as well. This foundation rule of em’s, which is often only used for font sizes, can also be applied to block level elements. So the size of an element can be dynamically resized in proportion to it’s parent element! Columns to their containers, and so on! Ethen goes into much greater details (WARNING: their is math involved) that I am willing to go into here… so, by all means, read the article already!

Sorry, Comments are currently 404'd