CSS Education & Training Initiative

The main adjustment needed for the center-column content area is to get the text to move up next to the photograph. This is achieved by fl oating the photograph left. Whenever I do this, I always add a right and bottom margin of perhaps .5 em to the fl oated image to ensure the text doesn’t touch it.

#content img {
float:left;
margin:0 10px 5px 0;
}

Next, I add some styles for the paragraph next to the picture. I don’t want too much text here, and I also want the list that follows to start below the image, so this is a chance to make a feature of this text and make it fairly large with plenty of line spacing.

#content p {
font-size:1em;
line-height:140%;
margin-bottom:.75em;
}

Finally, a few small tweaks to the default list styling complete the content area for this page (Figure 7.18).
#content ul li {
margin: 0 0 0 16px;
padding:.3em 0;
font-size:.8em;
}

All that is left to do is style the text in the header content area, promo area (right column), and footer.

The effect I want in the header is that the headline text touches the left edge of the header and the subhead text touches the right edge.

Normally, I would pad content away from the edge of its containing element, as I did with text in the box on the left navigation, but I want to create a dramatic look for the header to go with the black and gray look, and the visual tension caused by the text going right out to the edges is just what I want.

To further play up this effect, I have fl oated one heading one way and one the other. As the liquid layout is resized, the two elements change their relative position, adding to the overall effect. Also, the header needs to be opened up vertically. Some margins on the elements will take care of that.

Before I add these pieces of artwork to the left column, I want to make the left column wider to create some space around the background box. Currently, the column is 170 pixels wide, and I want it to be 200 pixels—this will give me 15 pixels of margin each side of the 170 pixel wide box. It’s easy to adjust the column widths in this liquid layout, as long as you remember that for each column’s width setting there is a corresponding margin on the adjacent column.

#nav {
float:left;
width:150px;
width:200px;
}
#content {
width:auto;
margin-left:150px;
margin-left:200px;
margin-right:170px;
padding:0;
}

Because this layout is liquid, no adjustment is needed to the outer wrapper around the layout. This would be the case if we were working with one of the fi xed-width templates.

Note that we are now putting background images over background images. We earlier added a background graphic, full_arc.gif, into the two_col_wrap div, which visually appears as the background for the nav div. Now, we are about to add the three pieces of artwork for the transparent box into divs inside the nav div. These pieces of artwork will appear over the artwork in the two_col_wrap div because their divs are descendants of two_col_wrap and therefore appear on top of it. This will mean that the furthest-back image in two_col_ wrap, which is the circles, will show through the transparent box in the nav column—a nice visual effect.