Mirificam Press

Indestructible Website: How to Build an EM Based Layout that Won't Break

July 29th, 2008 in Design Tips & Tutorials

by: Matthew Griffin

The task of laying out a website is quite a complicated feat when compared to other design mediums. The nebulous nature of the web makes every project a progression of give and take decisions. It's almost impossible to make everyone with every possible variation of browser, screen size, and screen resolution happy. But for too long we've looked at this situation as problem rather than the opportunity that it is. An amorphous medium gives us the opportunity to build designs that morph to fit the needs of individuals. EM based layouts are one step toward taking advantage of this opportunity. An EM based layout will allow your website to scale gracefully to fit the needs of the visitor. This article is a tutorial on how to build a two-column EM based website layout.

Here's the Idea...

The EM is a measurement just like PX or PT. One EM is equal to the pixel measurement of the current font size. So, for example, 1em on a web page with a font size of 16px equals 16px. The direct relationship between font size and EM allows us to build layouts that scale along with the font size. This means that a visitor with a browser font size set to "large" will see a perfectly scaled version the layout rather than a skinny layout with really big letters.

Setting Up the Page

The full example code for the layout in this tutorial can be found here but for the sake of instruction I'm going to break it all down into steps. We'll start with the body selector and the container div for the page. The font size on the body can be set to a percentage or a pixel size. For the sake of this example, we'll be using a percentage and assuming that the default font size is 16px. This means that a 46em wide layout will fit perfectly into a screen that's set to an 800x600 resolution. Here's the CSS and the HTML for the first step:

Adding a Header

The header will sit at the top of our layout and will fill the entire width of the 46em container we created in the last step. Our Website title will be an H1 which will scale along with the font size. As much as possible, I like to use em widths rather than pixel widths, even for padding and margins. Sometimes you'll be forced to switch to pixels when you run into scaling problems but I prefer the padding and margins to scale with the rest of the design. Here's the new code to add.

Expandable Columns

The two columns is where it gets a little tricky. We have to make sure that the sum of the widths of the columns is slightly less than width of the container. This will ensure that there's no funky div wrapping and everything scales correctly. Also, be careful about setting the font size on the column div itself. It will cause the entire column to scale along with the new font size. Instead, try setting the font size on the P selector inside the column div, like in the example below. The new CSS and HTML should look something like this:

Finally, the Footer

The footer is essentially a copy of the the header with the addition of a clear: both attribute. The clear: both attribute keeps the footer below our two columns. Here's the code for the footer:

And Now...

As I mentioned at the beginning of the tutorial, the completed example can be found here. Please feel free to copy the code and use it for whatever you want. In the end, the EM based layout isn't always the best solution. Sometimes we absolutely have to have the tight, fixed layout to make a layout work. But the EM based layout, while somewhat less predictable, will prove to be an accessible alternative in many cases. As a final note, I'd like to thank the people who build the Dreamweaver CS3 page templates. Reading through their code and comments made learning EM based layouts so much easier. If you have Dreamweaver CS3, I recommend you check them out.

Once again, here's the live example.

Post Your Comment