Page layout involves placing page elements (such as text and graphics) where you choose on a page. In the past, page layout was done with special HTML tags, including tables. The modern approach is to separate the page layout from the page contents by using CSS. This has the advantage that you can have different layouts for different media (screens, printouts, cellphones) as well as keeping the HTML clean and uncluttered for those users who don't use the CSS, such as a blind person who uses screen reading software.

Boxes

To understand page layout, you first have to understand that, to a web browser, a web page is a series of boxes. The boxes have a width and height, and they get assembled (laid out) on the page, much the way Ben Franklin might have laid out the text and pictures in his newpaper.

Boxes come in two kinds: blocks and inline.

A block is something big like a paragraph or a <div>. Blocks are preceded and followed by line breaks, so Ben Franklin or the layout engine stacks them vertically on the page. (Normally, a block doesn't have anything to the left or right, though we will see some exceptions later.)

An inline element (box) is something like a word, where Ben Franklin or the layout engine fills up a line with as many as it can, then goes on to the next line, and so forth. You may be surprised to learn that <img> elements are inline, so that a line is filled with as many images as will fit before starting the next line. (That's why centering an image is tricky; we'll look at that a bit later.)

Margins, Borders and Padding

The contents of a box can optionally be surrounded by a border. For example, the following CSS

p {
    border: 2px dashed red;
}

will put a 2 pixel dashed red line around the contents of each paragraph.

Padding is the distance between the contents of the box and the border. By default, it's zero, but if you'd like a little more room between your text and the border, you can increase it. Even if you don't have a border, padding can be used to increase the distance between the contents of your box and the contents of any neighboring boxes.

Margins are the distance between the borders and the next element. However, it's not quite as simple as that, because the margins for vertical elements sometimes collapse.

Exercise 1

Look at this modifying boxes using Inspect Element. (Dummy text courtesy of lipsum.com.)

In the exercise, you'll notice that contents of the box, including the padding, acquire the background color, but the margins are always transparent. Thus, padding and margins, which seem to be interchangeable when there isn't a border, aren't the same if you have a background color.

You'll also notice some big differences between blocks and inline elements. Not only are the inline elements put together on a line, but a <span> can be broken up if it's too wide (certain inline elements, such as images, can't be broken up). Also, the width and height, and top and bottom margins of inline elements are completely ignored.

Lengths and Units

Now that you've seen some CSS properties whose values are lengths, you'll want to know what values they can have. For example, we indented this paragraph by half an inch. It's the only indented paragraph in the site. We did it using the following code:

<p style="text-indent: 0.5in">Now that you've seen some CSS properties ...

You might guess that in means inches. To specify lengths effectively, you need to know the units that CSS uses. They come in several categories:

Ruler measures. Inches (in), centimeters (cm), and millimeters (mm).
Pixels. These measures are in pixels, so they're less flexible if the web page will be printed out onto paper, but they're useful on the web. This unit is specified using px.
Printer units. You probably know that font sizes are measured in points, as in a 12 point font. One point is equal to 1/72 of an inch, and is specified by using pt. A pica is 12 points (a pica font) and is specified by using pc.
Font-relative units. These measures are proportional to the size of the font, so they are bigger if the font is bigger, and smaller if it's smaller. This is great because visually impaired people may increase the font size to much greater than you'd ever expect, and you'd like the web page lengths to scale appropriately. These are appropriate measures for, say, the distance between lines (called the leading, from strips of lead that were put between the rows of type back in the olden days of actual lead type). The two font-relative sizes are em and ex. The em measure is named for the width of the letter M in the current font, and in CSS is defined to be equal to the size of the font. The ex measure is named for the height of the letter x in the current font, and in CSS is usually about half the size of the font.
Percentages. These are best for elements whose size you want to specify relative to the size of the enclosing element or the window.
If you want a paragraph to be three-fourths the width of the enclosing <div>, you can use code like the following:
```
div#content {
   width: 800px;
   margin-left: 100px;
}

p#note {
   width: 75%;
   margin-left: 25%;
}

<div id="content">
   <p>Here's the usual contents of the page ...</p>
   ...
   <p id="note">And here is a narrow note on the right side.</p>
</div>
```
Look at the percentage example in action.

Images are Inline Elements

Pictures (image elements, produced by the <img> tag) are inline elements. This may seem odd, since images look so much like big box-like things, and therefore ought to be block elements, but they are (by default), inline elements. So, the browser treats them like big words. Here's an example:

Bonnie and Chester were enjoying a picnic on the grass . Suddenly the sky filled with dark clouds . Soon, it began to rain . When the lightning began, they decided to head for home .

Centering Content

Before we get to more complex stuff, let's look at centering content, particularly images, since that's a common desire among CS110 students. Let's start, though, with centering lines of text within a block. Here's an eye chart:

E
F P
T O Z
L P E D
P E C F D
E F D C Z P
F E L O P Z D

All we had to do was to use the CSS property text-align: center. (Note that we used an inline style sheet in the example code, just for brevity. In practice, we would probably add a class to this div and define it in an external style sheet).

Since images are just like big letters, the same trick will work with images:

Centering Text

You should almost never center lines of text in a paragraph. You get ragged edges left and right, which looks ugly. Also, depending on the font, amount of text and the width of the region, the last line may be weirdly short (and centered). Here's a Tolkien quote:

Do not meddle in the affairs of wizards, for they are subtle and quick to anger.

You probably don't want that single word centered on the second line. But that can happen (and all-too-often does) when you center text and don't have complete control over browser-width, font-size, and the like.

Instead, what you probably want is to have normal, left-aligned text in a box that is itself centered. Let's see how to center boxes.

Centering a Block

To center a block, you have to give it a width that is smaller than its parent (which might be the <body>), and setting its left and right margins to be auto. Auto means to take the leftover space on the line and distribute it equally among the auto elements. If both margins are auto, the element is centered. Thus:

Do not meddle in the affairs of wizards, for they are subtle and quick to anger.

Centering Images

An alternative technique for centering images is to use the same margin trick that works for centering other block elements, such as the paragraph above. The difference is that <p> is already a block element, while <img> is inline. However, we can change an <img> element to be a block by using the display: block style. That is, to make an image that is centered, use a style sheet that makes the image display as a block, and sets the margin-left and margin-right to auto.

Buffy Summers Angel

Note that by making the <img> be block, they stack vertically, even without the <br> tags. If we had tried to use the text-align: center technique, the two pictures would have appeared next to each other on the line. (Of course, that may be what you want, in certain circumstances.)

You should consult this web reference on Centering Things in CSS.

Box Widths

Consider the following example of an overfull box. Look at the CSS for it. Why does the browser have a horizontal scroll bar? The box is 100% of the container, not 110%.

The solution to this mystery is that the width of a box is defined to be the width of its contents, not the width of the box. (If you think this is a stupid definition, you would find many who agree with you, but we're stuck with this definition.) Thus, if you define a box to be 100%, it had better not have any margin, border, or padding, or it will be overfull.

One way to avoid the creation of overfull boxes is to nest two boxes, set the width of the outer one, and then use the inner one to set the margins, border and padding. By default, the dimensions of the inner box will be determined by the outer one, which is just what you want. Here is an example of a full, not overfull box created with this idea.