Professional Web Design: Techniques and Templates, Fourth Edition

298
Chapter 11 ■ Case Study: High-Content CSS Design
Figure 11.13
The center column added to the design with the border of the products table turned on.
container, using the a5-individual-product and a5-individual-product p
rules. Figure 11.13 shows the design with the center column added with the
border of the products table turned on to show the space it takes up.
Note
Using comment tags to separate code makes finding particular sections much easier. Using an
intuitive system is important for designers to understand their code. In this section of code the "right
column" is the parent column, while "column right left" represents the left column of the right
section. Visually, though, in the design, this column is the center column. A designer could also
name this section the "center column," or name the "right column" the "parent right column,"
signifying that there will be a child right column.
■
The content in the right column is nested inside the a5-column-right container.
Because it is assigned absolute positioning, it is placed 42 pixels from
the top of the container. These 42 pixels force the column down past the
menu area. Otherwise, the column would begin in the area across which the
menu runs (see Figure 11.14).
Because the container is assigned absolute positioning, it is given a height
value of 365 pixels to ensure that the nested content inside it does not run
Game Developing GWX