Creating a maximum-width layout
Note that due to the padding and borders added to this div, it now takes up 644 pixels
of horizontal space, due to the 20-pixel horizontal padding values and the 2-pixel borders.
To return the overall width to 600 pixels, subtract the 44 pixels from the width
setting, reducing it to 556px.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
268
#wrapper {
max-width: 800px;
margin: 0 auto;
border: 2px solid #777777;
border-top: 0;
background: #ffffff url(wrapper-background.gif) 0 100% repeat-x;
padding: 20px 20px 50px;
}
2. Amend the body rule. At small browser widths, the design fills the browser window.
If you still want some space around the wrapper, even when the browser window is
narrow, all you need do is amend the body rule, adding some horizontal padding.
body {
background: #4d4d4d url(page-background.gif) repeat-x;
padding: 0 30px;
}
Required files Files from basic-boilerplates in the chapter 7 folder as a
starting point.
What you??™ll learn How to center a div within the browser window.
Completed files center-a-box-on-screen in the chapter 7 folder.
The final exercise in this section shows how to center a box within the browser window,
horizontally and vertically. Note that this kind of layout isn??™t particularly flexible, because
it needs the containing wrapper to have a fixed width and height. Therefore, take care
when using this device, because if your page has plenty of content, your users may be
forced to scroll a lot.
Pages:
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369