This can be achieved by adding further columns to the pages created in earlier exercises,
or by nesting wrappers with two columns. (In other words, the first wrapper can contain
a sidebar and a wrapper, which itself contains the main content and another sidebar.)
The only issue with this is that it doesn??™t allow for information to be provided in code in an
order different from that shown on the screen. For users of alternate devices, a site with a
sidebar (perhaps for navigation and advertising), followed by the main content, followed
by another sidebar (perhaps for boxouts) would require them to wade through the first
sidebar before accessing the main content. You can get around this by using a ???skip to
main content??? link (as per the skip navigation link from Chapter 5), but you can also set
the content in the order you want in the code (main content, first sidebar, second sidebar)
and then use CSS to reorder the columns on the screen.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
298
Required files Files from flanking-sidebars-starting-point in the chapter 7
folder as a starting point.
What you??™ll learn How to create flanking sidebars for a content area, thereby
enabling you to set content in one order in the code and another
onscreen.
Completed files flanking-sidebars-liquid and flanking-sidebars-fixed in the
chapter 7 folder.
1. Check out the page. Open flanking-sidebars.html in a web browser and in a text
editor.
Pages:
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392