2. Create single-column rules. The way this method works is to create overrides for
relevant rules. The contextual selectors will begin with a class selector that will be
applied to the page??™s body start tag, followed by the rules that require overriding.
For a single column, the wrapper no longer needs a background, the main content
area needs to be as wide as the wrapper (700 pixels), and the sidebar doesn??™t need
Using body class values and CSS to automate page layouts
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
304
to be displayed. Also, the default margin-right value for #wrapper needs to be
overridden, otherwise the main content area will end up 700 pixels wide plus 41
pixels of margin.
.singleColumn #wrapper {
background: none;
}
.singleColumn #mainContent {
width: 700px;
margin-right: 0;
}
.singleColumn #sidebar {
display: none;
}
This style can be applied to the web page by setting the body element??™s class value
to singleColumn.
3. Create an equal-column-split rule. For an equal column split, the column widths
need to be amended to the same value. But because the margin-right setting
defined earlier is 41px, the sidebar has been set to 1 pixel narrower than the main
content area. (An alternate option would have been to set both column widths to
330px and set margin-right in .equalSplitColumns #mainContent to 40px.)
The background-position horizontal value needs changing to reflect the new
column positions.
Pages:
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398