Working with sidebars and multiple boxouts
In this chapter so far, you??™ve seen how to create web page columns and also how to fashion
a boxout. In this section, two exercises will expand upon these ideas, showing how to
create two different layouts that make use of sidebars. Sidebars are common in print,
either for dividing up a page, thereby enabling a designer to show a main story and a
smaller story, or for providing an area for ancillary content to the main story, but without
having text wrapping underneath it (like in a boxout). The Pinkflag.com website (the official
website of the rock band Wire) makes use of sidebars throughout the site. In the following
image, a page from the Us section is shown. The main section of the page shows a
photo of a band member, along with a short biography. In the sidebar is a selection of the
subject??™s favorite tracks.
PAGE LAYOUTS WITH CSS
293
7
Based on what you??™ve seen so far, you might think the best way to create such a layout
would be to create a two-column layout and then add a border to one of the columns.
However, in CSS, borders and backgrounds stop as soon as the content does. Therefore, if
you add a border to the main content area, but the sidebar??™s content makes it taller than
the main content area, the separating border stops short. What you therefore need to do
is ensure that the two columns are placed in a wrapper, and then apply a vertically tiling
background to the wrapper, thereby ???faking??? the column separator.
Pages:
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387