Learning Web Design Third Edition- P34:Everything you need to know to create professional web sites is right here. Learning Web Design starts from the beginning defining how the Web and web pages work and builds from there. By the end of the book, you'll have the skills to create multi-column CSS layouts with optimized graphic files, and you'll know how to get your pages up on the Web. | Elastic Layouts Elastic Layouts TIP Elastic Layouts Patrick Griffiths the creator of Elastic Lawn has written some good tutorials and demos of elastic layouts available here Elastic Designs article at A List Apart articles elastic Elastic layout demo at HTML Dog articles elasticdesign demo A third layout approach is growing in popularity because it marries resizable text with predictable line lengths. Elastic also called jello layouts expand or contract with the size of the text. If the user makes the text larger the box that contains it expands proportionally. Likewise if the user likes her text size very small the containing box shrinks to fit. The result is that line lengths in terms of words or characters per line stay the same regardless of the text size. This is an advantage over liquid layouts where line lengths can get too long and fixed layouts where very large text may result in awkwardly few characters per line. Figure 16-6 shows the Elastic Lawn design by Patrick Griffiths at CSS Zen Garden cssfile 063 an often-referenced example of an elastic layout at work. Notice that when the text size gets bigger in each sample so does the content area of the page. However instead of rewrapping in the larger layout space the line breaks are the same. NOTE also uses an elastic layout as of this writing demonstrating that this approach is a viable option for large sites with lots of detailed information on the home page. 48 em 48 em Line length and line breaks stay the same Figure 16-6. The Elastic Lawn design by Patrick Griffiths at CSS Zen Garden is a classic example of elastic page layout. As any layout approach elastic layouts come with their own pros and cons Advantages Provide a consistent layout experience while allowing flexibility in text size. Tighter control over line lengths than liquid and fixed layouts. Disadvantages Images don t lend themselves to rescaling along with the text and the
