In the code, you have a wrapper that contains a masthead, followed by a
wrapper for the columns, followed by a footer. Within the column wrapper are
three divs: mainContent, leftSidebar, and rightSidebar. Each of these has a content
wrapper (as per step 4 of the ???Manipulating two structural divs for liquid layouts???
exercise). In CSS, the page defaults and font styles are already set, as are
styles for the masthead and footer. The clearFix method (see the ???Clearing floated
content??? exercise) has also been used, since the three columns will be positioned
by being floated. Note that for this exercise, the layout will be a liquid one, based
on percentage values for widths and margins.
2. Add the column backgrounds. Add the following two rules, which supply two backgrounds
for the divs. The first is applied to the column wrapper, setting the background
to gray and adding a horizontally tiling drop-shadow image. The second is
applied to the main content div, defining its background as white, and setting its
own background. This will create a seamless shadow effect, but the main content
will be differentiated from the sidebar via a brighter background.
#columnWrapper {
background: #ebebeb url(assets/grey-shadow-top.gif) 0 0 repeat-x;
}
#mainContent {
background: #ffffff url(assets/white-shadow-top.gif) 0 0 repeat-x;
}
3. Set column widths. Amend the #mainContent rule and add rules for the two sidebars,
floating all of the columns left and setting width values.
Pages:
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393