CSS Education & Training Initiative

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.