Producing a Quick and Simple Layout

Now, we want to define the spacing and width of the div that contains all the elements
of our page. We’ll also increase the font size for items within this div, to create the effect
shown in Figure 2.6. By adding the code at this point, instead of at the body level, we
ensure that relative padding and margin sizes are affected only within this div: #content {
margin: 0 auto 20px 20px;
padding: 1em 0 0 0;
width: 512px;
background-color:#fff;
font-size: 1.25em;
line-height: 1.75em;
}
Because the images we’re using are no wider than 500px, and we want to have room for the
border around each image, we’ll use a width of 512px for #content. You can vary this value
to reflect the maximum width of your images. I recommend setting a maximum of 500px to
ensure that the entire image will fit within most browser viewports. Just make sure that the
width of #content is equal to the total width of the image plus any left or right padding and
border properties.
We’re almost done!