Why It s Bulletproof

Why It's Bulletproof

If we combine all the code snippets needed to complete this box design, we're still left with an amount of code that is staggeringly less than what the nested-tables approach requires. And because we took the time to think about what made sense in terms of markup structure, we can rest assured that these boxes will mean increased accessibility and readability in a wide range of browsers and devices. Less codemore meaningful codeequals faster, more accessible, and readable content using anything from a phone to a desktop browser to access it.

Just as beneficial as the code trimming is the fact that this box design is truly flexible. Because of our cunning strategy for our background images, increasing the text size or including multiple lines of text cannot break the design.

Figure 5.14 shows the box at a few different text sizes, and its indestructible and bulletproof nature is revealed. Varying amounts of content are not a problem for this particular design. You can see that, as the box's content is increased, more of each background image is revealed. Because the bottom corners are aligned bottom on the <div> that wraps the whole box, that image will always shift down to reveal more of itself at the top. Similarly, because the top corners of the heading background are aligned top, more of that image's lower portion is revealed as the size or amount of text is increased.

Figure 5.14. The box's heading and content area can stretch vertically with increased text size.