Use the links below to share Indestructible Website: How to Build an EM Based Layout that Won't Break on your favorite social networks.
Back to the Article >>
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;
}
The HTML
<body class="my_page">
<div id="wrapper">
</div>
</body>
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>
</div>
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>
<p>Text</p>
<p>Text</p>
</div>
<div id="column_two">
<h1> Column Two</h1>
<p>Test</p>
<p>Text</p>
<p>Text</p>
</div>
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;
background:#DDDDDD;
}
.my_page #footer p {
margin: 0;
padding: .6em 0;
}
The HTML
<div id="footer">
<p>My EM Based Website Footer</p>
</div>
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.
- 102 Comments
- 42304 Views