The layout also suffers from a slight cosmetic glitch in
Safari 2, with some space being shown above the footer??™s border. To fix this, you can
add the following rule: /*\*/#wrapper {display: block;}??”however, this should
really be added in a Safari-specific style sheet attached using JavaScript (see the
???Targeting other browsers??? section in Chapter 9).
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
302
6. Make the layout fixed. Amending the layout to a fixed one is simple. Because the
layout will no longer span the window width, a border needs to be placed around
the wrapper (otherwise the drop-shadow cutoffs at the left and right just look
weird). Therefore, add a padding-bottom value of 20px to the body rule, and create
the #wrapper rule shown following:
#wrapper {
width: 700px;
margin: 0 auto;
border: 1px solid #555555;
border-top: 0;
}
Next, update the width and margin-left values for the three rules shown in the
following code, being mindful of the relationships mentioned in step 4 and the fact
that the width values cannot exceed the value set for the wrapper??™s width in the
previous step.
#mainContent {
background: #ffffff url(assets/white-shadow-top.gif) 0 0 repeat-x;
float: left;
width: 400px;
margin-left: 175px;
}
#leftSidebar {
float: left;
width: 175px;
margin-left: -575px;
}
#rightSidebar {
float: left;
width: 125px;
}
The following image shows what your page should now look like.
Pages:
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396