Finally, because both columns command equal prominence, the
font-size setting for the sidebar is set to 100% in .equalSplitColumns #sidebar.
.equalSplitColumns #wrapper {
background-position: 350px 0;
}
.equalSplitColumns #mainContent {
Note that when using designs such as this, be sure to empty the contents of nondisplayed
divs??”any content left within them is just a waste of bandwidth.
PAGE LAYOUTS WITH CSS
305
7
width: 330px;
}
.equalSplitColumns #sidebar {
width: 329px;
font-size: 100%;
}
This style can be applied to the web page by setting the body element??™s class value
to equalSplitColumns.
As mentioned, this exercise works in a similar way to some of the navigation ones in
Chapter 5. With a little thought, it should be easy enough to see how this automation
method can assist when creating websites. As long as the site??™s structure has been carefully
planned, you can usually get away with a single navigation bar and a single structure, but
have multiple layouts, each one driven by the CSS variations and the body class value.
Scrollable content areas
Scrolling is a matter of fact on the Web. Although designers should be careful not to make
users scroll too much (or in multiple directions??”sites that force both horizontal and vertical
scrolling tend to be awkward and annoying to use), some scrolling is inevitable with
the vast majority of websites. In the past, some designers created fixed sites that sat in the
middle of the browser window, content restricted by the viewing area.
Pages:
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399