The horizontal position
is the width of the main content div, plus half the margin once 1 pixel
is removed from that value (because the width of the ???border??? in the
background image is a single pixel). By placing the background image 499 pixels
from the left, it ends up exactly halfway between the content of the two divs.
#wrapper {
width: 700px;
margin: 0 auto;
background: url(faux-columns-background.gif) 499px 0 repeat-y;
}
5. To make it easier to differentiate the two areas of text, change the size of the text
in the sidebar, making it smaller.
#sidebar {
width: 180px;
font-size: 90%;
}
Using a percentage value is a quick way of doing this, with all values being based on
those from the main content area. If you want to set specific values for each of the
text elements within the sidebar, you could do so using contextual selectors
(#sidebar h1, #sidebar p, etc.).
PAGE LAYOUTS WITH CSS
295
7
Required files Files from multiple-boxouts-starting-point in the chapter 7
folder as a starting point.
What you??™ll learn How to use faux columns, boxouts, and the cascade to create a
page design with a sidebar that contains multiple boxouts.
Completed files multiple-boxouts-complete in the chapter 7 folder.
1. Examine the code. Open the web page and CSS document from multipleboxouts-
starting-point, and also open the web page in a browser so you can see
what it looks like. Lots of work has already been done here, but it??™s all stuff you
already know.
Pages:
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389