CSS Elastic Layout

What is it?

• CSS Zen Garden Text design in which elements expand to hold the expansion of fonts
  • The stylesheet for this design explains how to do it
  • blog explains how to do it
• The Zen of CSS Design: Visual Enlightenment for the Web, Dave Shea and Molly Holzschlag, Peachpit Press, 2005

How to do set it up

• Define the default font-size for the page in the body tag with a percentage
  body {font-size:90%;}
• Then define the rest of the font styles with proportional units, so that their font-sizes are relative to this default font
  p {font-size:1em;}
  h1 {font-size:200%;}
• The box model elements that hold other elements are also defined with proportional units not fixed-sized units such as pixels (px).
  The box model elements then will expand and contract as the user expands and contracts the browser text size.
• Translate your pixel units into em units
  1em = 12px
  Divide the number of pixels by 12 to get the number of em units
  #container { width: 48em; }
  #footer {width: 48em; padding: 4em 0;}
  
• This technique is discussed more fully in the Zen of CSS book, which unfortuntely is no longer part of Safari Books online.