The general principle of
columns is about more than written site content, though. For example, you could use one
column to house a vertical navigation bar and another to contain thumbnail images relating
to an article.
Working with two structural divs
In previous exercises, you??™ve worked with two divs, but one has been nested within the
other. In the following exercise, you??™ll work with two structural divs, seeing how seemingly
small changes to CSS rules can make a major difference to the layout of the web page. This
will highlight the flexibility of web layouts, showing how quickly you can build pages, and
also how easy it is to experiment with designs and make edits and rapid changes should
they be required.
Required files Files from two-divs-starting-point in the chapter 7 folder as a
starting point.
What you??™ll learn How to use two structural divs to create various types of fixedwidth
layouts, including two-column designs.
Completed files two-divs-fixed-complete in the chapter 7 folder.
Manipulating two structural divs for fixed-width layouts
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
278
1. Examine the code. Open up two-divs.html and you??™ll see a simple page layout. A
level-one heading is followed by the first div, with an id value of divOne. This is
then followed by a second div, which has an id value of divTwo. Both divs have a
level-two heading and some paragraphs within. Some initial styles are also in the
style sheet, defining the fonts and placing 20 pixels of padding around the page??™s
content (via the padding pair in the body rule) so the page content doesn??™t hug the
browser window edge.
Pages:
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377