This chapter is from the book
This chapter is from the book
This chapter is from the book
Summary
You may be familiar with the term baker's dozen. A smart baker will always add an extra muffin, cookie, or whatever to the batch. If one of the cookies burns or falls apart (or gets eaten by the baker), there's always an extra to make a complete dozen. In this way, the baker plans for the unpredictable. Why not bake an extra cookie or two when you've gone to all the trouble of mixing up an entire batch? Sometimes, the extra cookie is needed; sometimes it isn't.
All cookies aside (but still within reach, of course), when we build vertical expansion of horizontal components into our designs, it's as if we're making a baker's dozen of our own—we're planning for the unexpected and making room for text adjustments and varying amounts of content. In the end, we're saving time and giving the user (as well as site editors) better control and increasing accessibility.
Here are some points to remember when you're building horizontal design components:
- Taking nonessential graphics out of the markup and using background images within the CSS can help control code bloat.
- Use the "opposing floats" method for positioning content on opposite sides of a container.
- When the amount of content to be placed inside a design component is unknown, use two background images to let that component expand and contract.
- Plan for more space than you think you need. Make that extra chocolate chip cookie.