Add padding and margins. Switch the right values for float back to left, and
then change the padding-bottom properties to padding, adding values for the top
and horizontal edges. A margin-right setting for #divOne provides a gap between
the two divs.
PAGE LAYOUTS WITH CSS
283
7
#divOne {
background: #dddddd;
padding: 10px 10px 1.5em;
float: left;
width: 350px;
margin-right: 10px;
}
#divTwo {
background: #aaaaaa;
padding: 10px 10px 1.5em;
float: left;
width: 250px;
}
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
284
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 liquid
layouts, including two-column designs.
Completed files two-divs-liquid-complete in the chapter 7 folder.
This exercise looks at working with liquid rather than fixed layouts. Because of the nature
of liquid layouts, there are some very important differences in method that must be taken
into account, as you??™ll see.
1. Add backgrounds and padding. As per the previous exercise, add background
colors to the two divs to make it easy to see their boundaries.
#divOne {
background: #dddddd;
}
#divTwo {
background: #aaaaaa;
}
2. Float the divs and set widths. As explained in the previous exercise, setting a width
for the two divs and then floating them both in the same direction enables you to
stack them horizontally, thereby providing columns.
Pages:
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380