16.2. Using position and display to Create Rows

The Template Layout method requires that you set at least two different properties for it to work, so I’ll talk through both of these before showing the results. The two properties already exist in CSS2.1, but I’ll give them new values.

The first property is position, which you should remember has the values absolute, fixed, relative, or static. But in this new method position is used a little differently. To show you how it works, I’ll call on the same page elements that I used for the demonstrations in Chapter 15: a parent element and three children. I usually show the CSS involved before the markup that you apply it to, but in this case, I’ll make an exception. Here’s the markup first: