Skip to Main Content
Smashing CSS: Professional Techniques for Modern Layout
book

Smashing CSS: Professional Techniques for Modern Layout

by Eric A. Meyer
November 2010
Intermediate to advanced content levelIntermediate to advanced
300 pages
6h 1m
English
Wiley
Content preview from Smashing CSS: Professional Techniques for Modern Layout

Chapter 4. LAYOUTS

IT IS UNSURPRISING that one of the most basic things designers want to do with CSS is lay out pages. What is sometimes a bit more of a surprise is that there isn't a totally straightforward way to do layout with CSS. (Not that there has ever been a straightforward way to do layout on the Web. People only thought of table layout as simple because we got used to it.) This chapter takes a look at some ideas for making layout work simpler as well as covers a number of common and useful layout techniques.

OUTLINES INSTEAD OF BORDERS

To lead off, I'd like to talk about the use of outlines, which at first glance look a lot like borders but turn out to differ in ways that are very significant to layout. Outlines can be used in published layouts, and are very handy diagnostic tools when creating and debugging layouts in progress.

During layout creation, you can visualize the placement of your layout pieces using something like this (see also Figure 4-1):

div {outline: 1px dashed red;}
Outlining the divs.

Figure 4.1. Outlining the divs.

You might think that the same thing can be accomplished with border, but that's actually not true. The reason is that borders participate in layout. Outlines do not.

Here's what I mean: Suppose you have three column divs that are meant to fit into a container div 960 pixels wide. (If you dislike pixels, the same thing can happen with ems, percentages, or any other width ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

CSS3 Foundations

CSS3 Foundations

Ian Lunn

Publisher Resources

ISBN: 9780470684160Purchase book