Beginning CSS3 by David Powers

Author:David Powers
Language: eng
Format: epub, pdf
ISBN: 9781430244738
Publisher: Apress

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

Creating a grid with table-related values for the display property

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.