CSS Elastic Layout using Ems

I’ve recently revamped my employer’s website, www.bauerbuiltmfg.com, meaning I changed the look, design, and most photos of the site, but much of the typed content has been left untouched.

This is the first website I’ve created with an “elastic layout,” which I got the idea from this excellent post:  The Incredible Em & Elastic Layouts with CSS.  My elastic layout states the size of almost all elements (including images) in “ems”.  This is so that if someone resizes the webpage’s text, then the containers and images also change proportionally in size.

Elastic Layout is important to me because in an era where one viewer may have a 800 x 600 pixel monitor, another may be viewing it on a wall-sized display via high-def projector.  I wanted a design that will render consistently across all displays (with the possible exception of mobile-phone browsers), and it seems that entering sizes in pixels or percentages presents other limitations.

Tip: I created a simple spreadsheet with the formula from the Jon Tangerine article that allows me to enter the pixel-size of images and get the em size out.  You can download it below.

Download “Pixels to Ems Calculator” by clicking here.

CSS Elastic Layout web design using ems