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:


body  {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #FFFFFF;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000000;

.my_page #wrapper {
    width: 46em;
    background: #FFFFFF;
    margin: 0 auto;
    border: 1px solid #000000;
    text-align: left;


<body class="my_page">
    <div id="wrapper">

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.


.my_page #header {
    background: #000000;
    padding: 0 .6em;
    .my_page #header h1 {
        margin: 0;
        padding: .6em 0;
        font-size: 225%;
        color: #FFFFFF;

The HTML (this goes inside the wrapper div from the previous HTML snippet)

<div id="header">
    <h1>My EM Based Website Header</h1>

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:


.my_page #column_one {
    float: left;
    width: 12em;
    background: #CCCCCC;
    padding: .6em 0;
    .my_page #column_one h3, .my_page #column_one p {
        margin-left: .6em;
        margin-right: .6em;
        font-size: 70%;

.my_page #column_two {
    margin: 0 1.5em 0 13em;

The HTML (this goes under the header div from the previous HTML snippet)

<div id="column_one">
    <h3>Column One</h3>
<div id="column_two">
    <h1> Column Two</h1>

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:


.my_page #footer {
    padding: 0 10px;
    .my_page #footer p {
        margin: 0;
        padding: .6em 0;


<div id="footer">
    <p>My EM Based Website Footer</p>

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.



Posted By: redcom on 07/30/08

I always wanted to know how can i build fluid layouts. Where should i set the initial font size so that i can safely use the em measurements? This techniques can also be used for absolute position elements? Thanks

Posted By: kucrut on 07/30/08

just when i need it, big thanks!

Posted By: Silverburn on 07/30/08

I was trying to read the article and then I noticed something about the design of this page: the black & white background makes it hard to read half of the text

Posted By: Silverburn on 07/30/08

I just noticed that this has to do with the fact that I had an RSS feedbar open on the left of my screen. Thus the size of this screen was made less wide and I got a horizontal scrollbar. That scrollbar allowed me to move the text over the figure of that tree...

Posted By: Matthew Griffin on 07/30/08

Redcom, as I mentioned in the article, you can set your initial font size using just about any measurement and then use the EM measurement to make sure your layout element correspond to your original text size. Just keep in mind that the default font size on most modern browsers is 16px. So if you set your font size to 100%, for example, 1EM will be 16px in most cases.

Posted By: Matthew Grffin on 07/30/08

Silverburn, interesting. I may consider putting a white background on the body so visitors with lower resolutions can read the blog better.

Posted By: Edgar on 07/30/08

Hi Matt, I notice that some of the markup you've used has a . and other lines have a #. What is the difference? I know the . represents an ID that can only be used a single time or something... and the # is the class. What is the best way to think of those?

Posted By: Matthew Grffin on 07/30/08

Edgar, actually it's the other way around-- # is the id selector and . is the class selector. It's best to use ids and id selectors for major sections of your website that are never repeated. For example, the page header, the page body, and the page footer. Use classes for elements that may appear more than once on a page. Ids are also important if you are ever doing any Javascript programming. They allow you to manipulate and access the properties of elements on the page. Although, with a little extra work you can use classes to do the same thing. Hope that helps. I'll actually be posting an article about organizing CSS in the next month or so that should answer your question in depth.

Posted By: pete on 07/30/08

Great idea, I've been looking for something like this. The timing is good too, since I'm about to re-design my employer's site. Thanks. :)

Posted By: Matthew Grffin on 07/30/08

Glad it was helpful, Pete.

Posted By: Jin on 07/30/08

Matt, goog article. You're correct on concluding the article stating EM(elastic) design isn't for every case. A while back I tried to design a whole site using EM. not just font size, but also padding/margin, div width, image size etc., to keep the design integrity. At the end I decided it just wasn't worth the effort since the site was complex and has a lot of dynamic data.

Posted By: custom essay on 07/31/08


Posted By: Affordable Web Design on 08/12/08

Great post! This is probably one of the better techniques that I've seen, thanks for keeping the world informed about EM design.

Posted By: Kodichukwu on 08/12/08

Great! you've solved my basic problem. how about adding some graphics. "those tiny .jpg & .gifs.

Posted By: Gazikent on 11/11/08

just when i need it, big thanks!

Posted By: Seo Yarismasi on 04/27/09

Great idea

Posted By: on 07/15/09

What good article just about Build an EM Based . That�s manageable to go to the custom writing services ,which would like to make the <a href="">essay writing software</a> and <a href="">custom essay paper</a>. Any way, all should buy paper.

Posted By: buy research paper on 07/23/09

If you need to earn a great paper all about That�s manageable you can <a href="">buy persuasive research paper</a>, and i'll approve you!!! unlike other services, they offer excellent class research papers that are also dump of plagiarism. Students can order custom written essays choosing the custom writing service [url=]buy term paper[/url] [link=]buy essays[/link]

Posted By: Andrew Lukas on 08/11/09

There are many alternatives available for getting an education these days,you can <a href="">buy great term paper</a> or <a href="">buy custom research paper</a> which is intereating news for those who have not yet managed. truly, essays writing is not an easy production so try make right declaration between composing on yor own or to <a href="">buy essays</a> about How to Build... Maybe you need help with original research , maybe you want help in producing a fresh intention on a case that is vast and not an easy.

Posted By: First Class Fashionista on 10/11/09

I'm going to talk to my Web Master about an EM based layout because I have noticed that my web page is viewed differently in IE than in Firefox. Thanks for the information and your writing is very understandable.

Post Your Comment

Comments are closed.