2. Add the background colors. When initially working on CSS layouts and handcoding,
it??™s often useful to apply background colors to your main structural divs.
This enables you to more easily see their edges and how they interact. Therefore,
add the following rules to your CSS:
#divOne {
background: #dddddd;
}
#divTwo {
background: #aaaaaa;
}
If you test the web page at this point, you??™ll see the divs are positioned in a basic
linear fashion. The gap between the two occurs because the paragraphs have margins
assigned on their bottom edges??”therefore, the gap is from the margin of the
top div??™s last paragraphs.
PAGE LAYOUTS WITH CSS
279
7
3. Make the divs flush to each other. By adding padding-bottom values equal to the
margin-bottom value for paragraphs, you can make the div backgrounds flush to
subsequent content.
#divOne {
background: #dddddd;
padding-bottom: 1.5em;
}
#divTwo {
background: #aaaaaa;
padding-bottom: 1.5em;
}
Note that for an actual website, you should use id (and class) values relevant and
appropriate to the content within them, as evidenced by wrapper and boxout earlier
in this chapter. The values of divOne and divTwo are used in this exercise to enable
you to easily keep track of each one.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
280
4. Float the divs to make columns. By adding width values and floating both divs in
the same direction, the divs stack horizontally, thereby creating columns.
Pages:
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378