joshuaink

Elastic fantastic, or...

Sunday May 1, 2005

...A simple introduction to elastic layouts

I have been wanting to move away from fixed width layouts from some time and I have, to be honest, been skirting around the issue. With all the talk of liquid layouts, of late I thought it was time to take another look at a more flexible way of laying out.

My decision to provide clients with fixed width layouts has never been without a reason, but those reasons are now fading fast thanks to a deeper understanding of "Web Standards" and my increased confidence in Textpattern as a viable solution for people with no HTML knowledge but still wanting to make site updates. Here isn't really the place for that particular discussion though, perhaps another day.

Thinking back to when I made the leap from tables to CSS, I remember, in the beginning at least, sticking with the same basic layout ideas I was using for tables and simply applying them with CSS instead. It seems to me that I can do the same in order to make the leap to elastic layouts, apply the same principals as fixed width CSS design but use ems instead of pixels to do so.

That is really what this post is about, my notes from the process described above. It doesn't concern itself with the "bigger picture" but rather how I have tried to make the transition from pixel-based to em-based layout as comfortable for myself as possible. In doing so I have missed out large chunks of information and, perhaps, I have over simplified things somewhat.

Still, it has helped my thought processes and all I am aiming to do at this stage is break out of what has become a habit with very few reasons why any longer, a bit like smoking! I am posting it here, firstly, in the hope that it may offer a little help to anyone in a similar situation to myself and, secondly, in the hope of getting a little feedback from those already much further down the line.

All credit to Patrick for the wonderful Elastic Lawn and @media websites, which inspired me to at least give it a try. Also to Roger Johansson who's recent conversion to elastic added further motivation. Thanks, again, to Patrick for confirming that my thoughts about elastic design are somewhere near correct, though I must add, he hasn't read this particular post and all errors found here are mine, and mine alone.

At the time of writing my iBook is still being repaired, and showing no signs of coming back anytime soon. So I have had no opportunity to check the examples that follow on Safari and chums. Please do let me know if you have any problems and I will amend when possible.

Sizing fonts with ems

It was a pleasant surprise to learn that, having read Richard Rutter's post about sizing fonts with ems, I was already 50% of the way to understanding the basics of elastic design. Reading this post gave me all the information I needed in order to cling on, tightly, to the idea of fixed width layouts whilst venturing into uncharted territory. If you haven't tried sizing fonts with ems yet, go read the post, I'll wait...

Laying out with ems

This is the bit that monkeys with my marbles, it just don't not make no sense gu'vn'r, the font size will ultimately play a part in the width of the layout. Fortunately, I am simply on the bandwagon and not part of the vanguard, so I am happy to accept it as fact and save myself the headaches; if those who know, says it is so, that's more than good enough for me, so I'll march onwards!

Referring back to Richard's font sizing post, I thought the easiest thing to do was start off with a nice round "base" number. Taken as read that the majority of browsers have a default text size of 16 pixels, reducing that to 10 pixels seems like a nice easy number to deal with, so that's what I set up, as follows:

1. body{
2. font-size:62.5%;
3. }

What is an em?

I really don't know the definitive answer to that, though I have read many conflicting ideas of what an em actually is. Digging into the full answer will just confuse the issue, so, for the purposes of this demonstration, 1 em is equal to 100% of the "base" number, which I set as 10, above.

Armed with this information, I now want to set up a container div to the equivalent size of 470px and doing this is simply as case of dividing 470 by 10 to give me my em value:

1. #container{
2. width:47em;
3. }

As this first example shows, it's not totally pixel perfect across all browsers, but it's as near as damn it and it's certainly not scaring me off. The only problem is the text is way to small to be easily read, so I guess I can just increase the font size for that div, perhaps to the equivalent of 14 pixels:

1. #container{
2. width:47em;
3. font-size:1.4em;
4. }

As the example now shows, this is not going to work because the div starts expanding to accommodate... buggers.

Styling the HTML tags within the container div doesn't have the same effect as above, thankfully. Given that a proper design job gets the full tag by tag treatment anyway, it's no biggie, so:

1. h1
2. {
3. font-size:1.7em;
4. }
6. p{
7. font-size:1.4em;
8. }

This applied, a quick look at the next example shows I am where I want to be and, obviously, as a fixed width addict I want to centre my site on screen.

The same principals as for fixed width can be applied: Add a div with an id (in my case usually called "wrap") but use an em value to define the width as opposed to pixels, in this case the equivalent of 770 pixels and, of course, I need to set the margins in the usual "fixed width way":

1. #wrap{
2. width:77em;
3. margin:0 auto;
4. }

Again with the example, which looks just dandy from this end.

To finish off I may as well set up a two column layout just to demonstrate the complete job. It's as you'd expect if you did it the fixed width way, and for that reason, I don't think any more code is really needed on this particular demo. It's pretty self-explanatory and uses a similar technique as already explained here. Of course, you can always look at the styling of the final example if you want more detail.

So there you have it, my first baby steps towards more flexible layouts.

I'll leave you with a list of articles that are much more detailed:

Bibliography

• Elastic Design by Patrick Griffiths
• How to size text using ems by Richard Rutter
• Ideal line length for content by Russ Weakley
• About fluid and fixed width layouts by Roger Johansson

• Skip to main navigation
• Skip to sub content and search form

1. Graham Bancroft

   1216 days ago

   If I’m right (a first) then isn’t for example 1.5em the same as 150%? I haven’t the first clue re above but always size my text as a %, yeh but, no but, and then 15px is the same as 1.5em, but don’t they all resize in a browser?
   
   Just designing my own proffessional (ha ‘kin ha) site, and decided for some reason to try fluid full page stuff, yeah, the whole friggin page, I know, I know.

2. Graham Bancroft

   1216 days ago

   Sorry John, I was just thinking text size not div size, I need to read more/sleep more/drink less to get to grips me thinks.

3. Gabriel Mihalache

   1216 days ago

   The main reason I don’t do elastic layout is the lack of proper min/max-width/height in IE and other browsers.
   
   I’m curious… has anyone tried elastic tables? That might be interesting.

4. Graham Bancroft

   1216 days ago

   I always, hold on….bollocks. I nearly always check the IE text sizing in a design. ;-{

5. Graham Bancroft

   1216 days ago

   Got it,
   
   When an em size is added to a div width, the said div becomes resizable as well as the text size if em added to such.
   
   Sorted.
   
   Yeah but, what if…..........

6. Tristan Dunn

   1216 days ago

   You forgot your closing div for the wrap in the final example. It’s causing it to not display correctly in Firefox.

7. Tristan Dunn

   1216 days ago

   Well, now I’m confused, it’s displaying right now, but the div is still missing.

8. Daniel

   1215 days ago

   Thats a great article, thank you!

9. paul haine

   1215 days ago

   I’ve been using minmax.js for solving the lack of min/max-width/height in IE. It works just as well as the solution John links to but with marginally less thinking on the part of the developer – you just include the script and then min/max-width/height just work.

10. Schultzy

    1215 days ago

    I use a weird muddle of things to make my pages almost elastic.use persentages most of the time and em’s for fonts but use px for details like padding and margins.
    
    This works and it allows me to stretch the page from 640X480 – anything realy.
    
    Good look all CSS rebooters

11. Graham Bancroft

    1215 days ago

    Just had a read with a strong coffee and a clearish head and now makes complete sense and is very helpful indeed, cheers.

12. Schultzy

    1215 days ago

    My designing sounds weird but it alows for prety much any browser shape or form. Whilst it still looks prety much the same all the time.

13. Matthew Pennell

    1215 days ago

    I’ve always worked from the Noodle Incident gospel that setting your base font-size to anything less than 76% can result in unreadable text; my CSS usually starts off like this:
    
    body {
    font-size: 76%;
    }
    
    p {
    font-size: 0.9em;
    }
    
    I suppose the only difference between that and John’s example is that I don’t have a mental picture of 1em = 10px.

14. Dave

    1215 days ago

    Thanks for the article John, I made a little flash thingy with Captivate to help me/others see what the ‘em’ actually does. you can watch it here if you want.

15. Andy Stones

    1215 days ago

    I’ve gone for fluid with my latest design for my site.
    
    Which, after a hole 4 days! Hasn’t been deleted (yet). Hopefully it will be up and running in a few days (weeks).
    
    Oh, and I read somewhere that ‘em’ is a measurment used in typography. 1 ‘em’ is the width of a capital M in the font you are using ( i think)...

16. Matthew Pennell

    1215 days ago

    Andy Stones: “Oh, and I read somewhere that ‘em’ is a measurment used in typography. 1 ‘em’ is the width of a capital M in the font you are using ( i think)...”
    
    I think actually it’s the height of a capital M (although I could be wrong).

17. Bob Rackers

    1214 days ago

    In my own experiments, I’ve found the following, and use a similar, but more precise solution. The following has only been tested with IE6 and Firefox 1.0.3.
    Setting IE6 at text size of medium, and Firefox text-size at normla, IE renders fonts larger than Firefox. It appears IE6 is using 16px and FIrefox is using 14px.
    I created two s in an XHTML 1.1 document, one after the other, and set the width for the first using “em”, and the second using “px”.
    After playing around with them, both in IE6 and Firefox, Firefox was a simple solution, but IE lost a pixel here and there in comparison to using “em”. For example, in IE, 10em = 99px, but 90em = 894px.
    It also seems it only respects integer values for percentage values.
    I left the font size below at 62.5%, but it appears that is the same as 62% to IE. It’s just a reminder to me that is the actual value IE should be using.
    
    I used a with the id of “wrap” which is just under the BODY element, and assigned it a font-size of 101%. This makes up for the lost pixels and the result is the following code which gives me the equivalent of 1em = 10px for both browsers. Beyond this point, all elements get sized using ems.
    If anyone wants to test other browsers and report the results, I’d be interested in knowing about it.
    
    Here’s the CSS:
    
    html {font-size: 100%;}
    body {font-size: 62.5%;} /* for IE */
    #wrap {font-size: 101%;} /* for IE */
    
    html>body {font-size: 71.5%;} /* ignored by IE */
    html>body #wrap {font-size: 100%;} /* ignored by IE */

18. Bob Rackers

    1214 days ago

    Apologies if the previous post is confusing. It looks like the HTML got stripped out. It should say “I created two DIVs in an XHTML1.1 document…”
    
    So the HTML pseudocode looks like this:
    
    BODY
    WRAP
    CONTAINER1
    contents…
    CONTAINER1 ends
    
    CONTAINER2
    contents…
    CONTAINER2 ends
    WRAP ends
    BODY ends

19. Andy Stones

    1214 days ago

    Right, found it…
    
    I read it on mark boulton’s site (part of his ‘Five Simple Steps To Better Typography Series’), and it seems he was wrong as well…
    
    One em = The distance horizontally equal to the type size, in points, you are using. Eg. 1em of 12pt type is 12pt. (Thanks to Joe for correcting me on this.)

20. Joost van der Borg

    1212 days ago

    @Tristan I’m having the same problem. First time it displayed wrong in Firefox (win), causing the right column to display beneath the left one. The second time I visited te page (final example) it was displaying fine.
    BTW: Beautiful site John :)

21. Tim

    1212 days ago

    @Bob:
    
    The difference in font size rendering should be down to the rendering mode you’re in (standards-compliant or quirks).
    
    As long as you use standards-compliance mode you shouldn’t see any difference between IE6 and Firefox/Mozilla for any given font-size keyword.
    
    And anyway, pixel-perfection is a pot of gold at the end of the rainbow – you’ll never reach it. Better to have similar, good rendering cross-browser than attempt identical rendering.

22. Tim

    1212 days ago

    Great looking site John.
    This is a great discusssion and the coments are almost as helpful as your post. I will be linking you (and paraphrasing a little) on my blog tips site
    http://www.spyjournal.biz/blogtips/blogtips.html
    
    link to my post
    http://www.spyjournal.biz/blogtips/2005/05/technical-post-on-css-and-design.html

23. Bob Rackers

    1211 days ago

    I mentioned that the document was XHTML 1.1 for that reason. I didn’t mention that I used the complete DOCTYPE, though. (I did.)
    
    I don’t use the “xml…” first line, since it sends IE into Quirks mode. So it should have been in standards-compliance mode.
    
    Pixel perfection may not be possible across all browsers, but so far it works on these two browsers. Close enough is never close enough. Thanks for the feedback.

Christmas gifts?

Recently

The last seven posts made on this site.

• Please check your Joshuaink subscription
• Transferring money abroad
• Leaf blower
• A charitable calendar that actually looks worth having
• Borat meets David Letterman
• Win A Copy of Simon Collison's CSS Book
• My job does have value... damn you!

Geeky shiteMeta

• Subscribe to this site
• Gvisit visitor logs