In other words, a 100-pixel-wide element
with 20 pixels of padding will take up an overall width of 140 pixels, not 100 pixels with
20 pixels of padding within.
Note that the top and bottom margins on adjacent elements collapse, meaning that the
overall box dimensions aren??™t necessarily fixed, depending on your design. For instance, if
you set the bottom margin to 50px on an element, and you have a top margin of 100px on
the element below it, the effective margin between the two elements will be 100 pixels,
not 150 pixels.
PAGE LAYOUTS WITH CSS
263
7
CSS layouts: A single box
In the remainder of this chapter, we??™ll walk through a number of common CSS layout techniques,
which can be combined to form countless layouts. In Chapter 10, these skeleton
layouts will form the basis of various full web page layouts, which will also integrate techniques
shown elsewhere in the book (such as navigation bars).
The starting point for any layout is a single box, which this section concentrates on. I typically
refer to these as ???wrappers??? (and accordingly provide said divs with an id value of
wrapper); and you can think of them as site containers, used to define a width for the site,
or set a fixed-size design in the center of the browser window.
Required files Files from the basic-boilerplates folder as a starting point.
What you??™ll learn How to create a fixed-width div.
Completed files create-a-fixed-width-wrapper in the chapter 7 folder.
Pages:
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365