A Layout for Every Occasion

Abstract

In this chapter you’ll learn how to use CSS to position elements, and create CSS layouts. This is something that CSS has historically been weak at—CSS 2.1-based layout techniques use properties not originally intended for page layout, and unsuited for today’s web applications. We’ll start by revisiting the basics: the CSS box model, floats, positioning and friends, and how to use them to create flexible and fixed layouts. We’ll then take a look at the hidden power of @media media queries and see how you can adapt your CSS to present a customized experience to devices based on their capabilities, under the banner of Responsive Web Design. Then we’ll end with a peek into the future of CSS3 layout specifications. But first let’s visit the past to examine some trends that have influenced CSS layouts and set the stage for why media queries have become so important recently.