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 a two-column fixed-width
layout, using both pixel- and percentage-based values.
Completed files using-wrappers-to-contain-columns in the chapter 7 folder.
1. Add a wrapper. Open the HTML document and place a div around the web page??™s
content, and give the div an id value of wrapper.
[web page content]
2. Amend the body rule. Because the page will be fixed and centered, there??™s no
longer a need for horizontal padding on the body element; therefore, amend the
body rule in the CSS file as follows:
Placing columns within a wrapper
Note that, clearly, liquid layouts can have widths lower than 100%; this example
showed that percentage because it??™s the most common width used for liquid layouts
and has the most problems to overcome. Also, rounding errors can cause problems
with liquid layouts when the width values add up to 100%??”see the ???Dealing with
rounding errors??? section in Chapter 9 for more on this.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
288
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 20px 0;
}
3. Add the following rule to center the wrapper, per the ???Creating a fixed-width
wrapper??? exercise earlier in this chapter:
#wrapper {
width: 700px;
margin: 0 auto;
}
4.
Pages:
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383