Bulletproof Web Design: Creative Floating
- Use floats to achieve grid-like results
- A Common Approach
- Why It's Not Bulletproof
- A Bulletproof Approach
- Why It's Bulletproof
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Use floats to achieve grid-like results
In previous chapters, we started each bulletproof approach by first deciding how the component we’re dealing with should be structured—that is, what markup is most appropriate for the content being displayed? This, I believe, is an important step when building any website. With a goal of selecting elements that convey the most meaning to what they surround, you hope to be left with enough “style hooks” to apply a compelling design with CSS. But more importantly, choosing the best markup for the job means the content of the page has the best chance of being understood properly across the widest possible range of browsers and devices. It’s the foundation and should convey a clear message, regardless of the design applied on top of it via CSS. Additionally, if we take time to consider optimal structure (meaningful HTML) and design (CSS) separately, changing that design later on down the road becomes less like finding a needle in a haystack and more like changing the slipcover on a sofa.
Settling on an optimal structure doesn’t have to limit the way it’s displayed, however. As we’ll explore in this chapter, the creative use of the float property can give us grid-like results—with a fraction of the code we’d need with the nested-tables approach. By paring down the markup to its barest essentials, we make it easier for browsers, software, and all devices to read our content—at the same time making it easier for other designers and developers to modify and edit these components.
We start this chapter off by rebuilding a box containing multiple pairings of an image, title, and description. This is a common layout requirement found on sites all over the web, and one that we can handle elegantly using minimal markup and CSS.