HTML and CSS Reference
In-Depth Information
Chapter 12
Cross-Browser Layout Techniques
Most websites use some sort of grid pattern for layout. In the early days of the Web, HTML tables provided the
basic grid structure. But using HTML tables for layout is bad for accessibility and search engine optimization. The
CSS3 Flexible Box Layout and Grid Layout modules look set to revolutionize the way pages are laid out, but until
they're universally supported, you need techniques that work in all current browsers. I'll come back to flexible
box layouts in Chapter 22.
For complete cross-browser support, you need to use floats and margins to create multiple-column layouts,
although you can also use absolute positioning for sidebars. If you no longer need to support IE 7 and earlier, you
can also use the table-related values of the
display
property, which make ordinary HTML elements act like table
rows and cells. Used with care, CSS table display offers some of the benefits of table layout—such as equal-height
columns—without the accessibility problems associated with HTML tables.
Because of the wide range of screen sizes now in use, this chapter concentrates on fluid or responsive layout.
In particular, you'll learn about:
•
Building two- and three-column layouts with floats and absolute positioning
•
Using an image to fill in sidebar backgrounds
display
property
•
Creating a grid with table-related values for the
The layouts in this chapter use columns that are independent of each other. Multi-column layout, where
content flows automatically from one column to the next like in a newspaper or magazine, is the subject of
Chapter 18.
■
The search for the ideal layout system has given rise to many CSS grid frameworks, such as the 960 Grid
System (
http://960.gs/
) and Blueprint (
http://blueprintcss.org/
)
. I'll leave you to explore them yourself.
Tip
What Size Browser Window Should I Design For?
For years, this has been a constant subject of debate in online forums. Every few years, the consensus shifted,
but always in the same direction—upward. The arrival of the iPhone and iPad, followed by the proliferation of
Android smartphones and tablets, suddenly changed the question. It was no longer how big you could go, but
how could you accommodate such a wide range of screen sizes and resolutions.
The general consensus is you shouldn't design for a specific size, but should create liquid—or responsive—
designs, using percentage widths. Keep the layout within a prescribed range by using
min-width
and
max-width
.
