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;
}

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.