Advertisement

A Layout for Every Occasion

  • Richard Clark
  • Oli Studholme
  • Christopher Murphy
  • Divya Manian

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.

Keywords

Module Level Extra Space Scalable Vector Graphic Page Layout Vertical Margin 
These keywords were added by machine and not by the authors. This process is experimental and the keywords may be updated as the learning algorithm improves.

Preview

Unable to display preview. Download preview PDF.

Unable to display preview. Download preview PDF.

Copyright information

© Richard Clark, Oli Studholme, Christopher Murphy and Divya Manian 2012

Authors and Affiliations

  • Richard Clark
  • Oli Studholme
  • Christopher Murphy
  • Divya Manian

There are no affiliations available

Personalised recommendations