Box Properties

In previous lessons, my discussion of cascading style sheets has dealt mostly with properties that can work at a block or a character level, and are designed to change the way text looks. There are also a number of properties that pertain to blocks but not characters. These properties are used to position elements, control the white space around them, and to apply effects such as borders to them. They're referred to as box properties, because they work on box-shaped regions of the page.

Once you've mastered these properties, you can forget about using tables to lay out a page. CSS offers all the capabilities that tables do, with less markup and the capability to maintain the layout in one CSS file rather than on each page of your site.

When discussing box properties, I'm going to start off with a humble <div>. People who lay out pages using CSS love the <div> tag because it brings absolutely nothing to the table in terms of modifying the appearance of a page. It's just a container that you can apply styles to.

With box properties, there are general properties that enable you to set specific attributes of a more general property individually, or you can use the general property to set several attributes at once. If you want to set different values for each side of the box, you should use the properties that set individual attributes. The CSS specification says that you can set individual values for each side using the general property, but some browsers don't support that usage.

Controlling Size

There are two properties for controlling the size of a box element: width and height. They enable you to set the size of the box to an absolute size, or if you prefer, to a size relative to the browser window. For example, to make the header of your page 100 pixels high and half the width of the browser, you could use the following rule:

#header { width: 50%; height: 100px; }

Unlike tables, which, unless you say differently, are only as large as the widest bit of content, many other block-level elements are as wide as the browser window by default. For example, paragraphs and <div>s are both the full width of the browser window by default. If the following text were wrapped in a table, it would be very narrow. But inside a regular paragraph, the box containing the text will be as wide as possible unless you specifically indicate that it should have a particular width.

<p>one.<br />two.<br />three.<br /></p>

Of course, when you place elements side by side, you can also squeeze them down. We'll look at that a bit later.

Borders

CSS provides several properties for controlling borders around elements. When you worked with tables, you got a taste of borders. In the CSS world, you can apply them to any box. First, let's look at the border property by itself:

border: width style color;

When you use the border property by itself, there are three values associated with it (any of which can be eliminated). The first is the width of the border. You can also use any unit of measurement you like to specify the border width, or if you prefer, you can use thin, medium, or thick. The actual width of borders specified using the keywords is entirely dependent upon the user's browser.

The next option is style. The default here is none for most elements; the other options are dotted, dashed, solid, double, groove, ridge, inset, and outset. Not all browsers support all the border styles.

The last option is color. As is the case with all properties that accept multiple values, you aren't required to specify any of them. You need specify only the values that you want to change. Here are some examples that use the border property:

Input

.one { border: thin dotted black; } .two { border: 2px solid blue; } .three { border: 3px groove red; } .four { border: thick double #000; }

Figure 9.1 is a screenshot of the previous styles applied to some paragraphs.

Output

Figure 9.1. Four usages of the border property.

There are a number of additional properties that can be used to modify the border of the page. You can set the styles for each side's border individually using border-top, border-right, border-bottom, and border-left. That enables you to create styles like this:

.one { border-top: thick dotted black;     border-right: thick solid blue;     border-bottom: thick groove red;     border-left: thick double #000; }

This is also useful if you want to create effects like marking quotes with a line down the left margin, like so:

blockquote { border-left: 3px solid red; }

You can see both of these rules in action in Figure 9.2.

Figure 9.2. Using directional properties to give individual borders to different sides of a box.

One thing that's obvious from the two previous screenshots is that there's not much space between the border and the text. I'll take care of that when I get to the padding property. Another option is to specify each specific property that's built into the composite border property individually. These properties are border-style, border-width, and border-color. Here's an example:

p { border-style: solid dashed;   border-width: 2px 4px 6px;   border-color: blue red green black; }

If you supply only one value for the property, it will be applied to all four sides of the box. If you supply two values, as I did for the border-style property, the first value will be applied to the top and bottom, and the second will be applied to the left and right side. For the border-width property, I supplied three values. In this case, the first value is applied to the top, the second to the left and right, and the third to the bottom. As you can see, the values are applied to the sides of the box in a clockwise fashion, and if a value isn't supplied for a particular side, the value assigned to the opposite side is used. The last property, border-color, has four values, so the values are applied to all four sides, clockwise. The resulting page appears in Figure 9.3.

Figure 9.3. A different way to apply border styles.

There are also four more properties: border-top-width, border-right-width, border-left-width, and border-bottom-width. These properties aren't particularly useful when you can just use border-width to set any or all four at the same time.

Margins and Padding

There are two sets of properties used to control white space around boxes: margin properties and padding properties. There's a reason why I discussed the border property before discussing margin and padding. The padding property controls white space inside the border, and the margin property controls the white space between the border and the enclosing block. Let's look at an example. The web page that follows has one <div> nested within another. The outer <div> has a solid black border; the inner <div> has a dotted black border. The page appears in Figure 9.4.

Input

<html> <head>   <title>CSS Example</title>   <style type="text/css">     .outer { border: 2px solid black; }     .inner { border: 2px dotted black;          padding: 0px;          margin: 0px; }   </style> </head> <body> <div > Outer. <div > Friends, Romans, countrymen, lend me your ears;<br /> I come to bury Caesar, not to praise him.<br /> The evil that men do lives after them;<br /> The good is oft interred with their bones;<br /> So let it be with Caesar. The noble Brutus<br /> </div> </div> </body> </html>

Output

Figure 9.4. Nested <div>s with no margins or padding.

As you can see, the text in the inner <div> is jammed right up against the border, and the inner border and outer border are flush against each other. That's because I've set both the padding and margin of the inner div to 0px. The results in Figure 9.5 show what happens if I change the style sheet to this:

Input

.outer { border: 2px solid black; } .inner { border: 2px dotted black;      padding: 15px;      margin: 15px; }

Output

Figure 9.5. The inner <div> has 15 pixels of padding and margin here.

As you can see, I've created some space between the border of the inner <div> and the text inside the inner <div> using padding, and some space between the border of the inner <div> and the border of the outer <div> using margin. Now let's look at what happens when I add some margin and padding to the outer <div> as well. I'm also going to give both the inner and outer <div>s background colors so that you can see how colors are assigned to white space. The results are in Figure 9.6. Here's the new style sheet:

Input

.outer { border: 2px solid black;      background-color: #999;      padding: 15px;      margin: 40px; } .inner { border: 2px dotted black;      background-color: #fff;      padding: 15px;      margin: 15px; }

Output

Figure 9.6. Both the inner <div> and outer <div> have margin and padding.

I gave the outer <div> a large 40-pixel margin so that you could see how it moves the borders away from the edges of the browser window. Note also that there's now space between the text in the outer <div> and the border. You can also see that the padding of the outer <div> and the margin of the inner <div> are combined to provide 30 pixels of white space between the border of the outer <div> and the border of the inner <div>. Finally, it's important to understand the behavior of the background color. The background color you assign is applied to the padding, but not to the margin. So, the 15-pixel margin outside the inner <div> takes on the background color of the outer <div>, and the margin of the outer <div> takes on the background color of the page.

Collapsing Margins

In the CSS box model, horizontal margins are never collapsed (if you put two items with horizontal margins next to each other, both margins will appear on the page). Vertical margins, on the other hand, are collapsed. Only the larger of the two vertical margins is used when two elements with margins are next to each other. For example, if a <div> with a 40-pixel bottom margin is above a <div> with a 20-pixel top margin, the margin between the two will be 40 pixels, not 60 pixels.

At this point, it should be clicking why CSS is a nice alternative to tables, assuming that your data isn't tabular. I haven't talked at all yet about positioning, but you can see that for putting borders around things or putting them inside boxes with white space around them, CSS makes your life pretty easy.

You already know that to center text within a box, the text-align property is used. The question now is, how you center a box on the page. In addition to passing units of measure or a percentage to the margin property, you can also set the margin to auto. In theory, this means set this margin to the same value as the opposite margin. However, if you set both the left and right margins to auto, your element will be centered. To do so, you can use the margin-left and margin-right properties, or provide multiple values for the margin property. You can also do the same thing with margin-top and margin-bottom. So, to center a <div> horizontally, the following style sheet is used (the newly centered <div> is in Figure 9.7):

Input

.inner { border: 2px dotted black;      background-color: #fff;      padding: 15px;      width: 50%;      margin-left: auto;      margin-right: auto;      }

Output

Figure 9.7. Both the inner <div> and outer <div> have margin and padding.

Caution

Internet Explorer cares about your document type definition (DTD) settings. If you don't indicate in your document that you're using HTML 4.01 or XHTML 1.0, Internet Explorer will not honor things such as margin: auto. If the DTD is left out, IE assumes that you're using an old version of HTML that doesn't support features like that.

Tip

If you want elements to overlap each other, you can apply negative margins to them instead of positive margins.

Another thing to remember is that the <body> of your page is a box as well. Let me make yet another change to my style sheet to show how you can apply styles to it. In the new style sheet, I adjust the border, margin, and padding properties of the <body> tag. I also make some changes to the outer <div> to better illustrate how the changes to the <body> tag work. The changes related to the new style sheet appear in Figure 9.8.

Input

.outer { border: 2px solid black;      background-color: #999;      padding: 15px; } .inner { border: 2px dotted black;      background-color: #fff;      padding: 15px;      margin: 15px; } body { margin: 20px;     border: 3px solid blue;     padding: 20px;     background-color: #cfc;     }

Figure 9.8. Treating the body of a document as a box.

In this example, you can see that you can adjust the margin padding, and border of a document's body. In Mozilla, the margin is placed outside the border, and the padding inside it. However, unlike other boxes, the background color is applied to the margin as well as the padding. In Internet Explorer, things are a bit different. Both the margin and padding are applied, but the border appears around the edge of the windoweven the scrollbars are placed inside the border, as shown in Figure 9.9.

Figure 9.9. Modified border properties in Internet Explorer.

Float

Normally, elements flow down the page from left to right and top to bottom. If you want to alter the normal flow of the page, you can use absolute positioning, which I'll discuss in a bit, or you can use the float property. The float property is used to indicate that an element should be placed as far as possible to the left or right on the page, and that any other content should wrap around it. This is best illustrated with an example. First, take a look at the page in Figure 9.10.

Figure 9.10. A page with no floating elements.

As you can see, the three boxes run straight down the page. I've added a border to the first box and reduced its width, but that's it. Here's the source code to the page, with the addition of a few additional properties to change the page layout:

Input

<html> <head>   <title>CSS Example</title>   <style type="text/css"> .right {   border: 3px solid black;   padding: 10px;   margin: 10px;   float: right;   width: 33%; } .bottom { clear: both; }   </style> </head> <body> <p > The absence of romance in my history will, I fear, detract somewhat from its interest; but if it be judged useful by those inquirers who desire an exact knowledge of the past as an aid to the interpretation of the future, which in the course of human things must resemble if it does not reflect it, I shall be content. </p> <p > The absence of romance in my history will, I fear, detract somewhat from its interest; but if it be judged useful by those inquirers who desire an exact knowledge of the past as an aid to the interpretation of the future, which in the course of human things must resemble if it does not reflect it, I shall be content. In fine, I have written my work, not as an essay which is to win the applause of the moment, but as a possession for all time. </p> <p > The absence of romance in my history will, I fear, detract somewhat from its interest; but if it be judged useful by those inquirers who desire an exact knowledge of the past as an aid to the interpretation of the future, which in the course of human things must resemble if it does not reflect it, I shall be content. In fine, I have written my work, not as an essay which is to win the applause of the moment, but as a possession for all time. </p> </body> </html>

As you can see from the style sheet, I've set up the <div> so that its width is 33% of the width of the enclosing block (in this case, the browser window), and I've added some padding, a margin, and a border for aesthetic purposes. The real key here is that I've added the float: right property to the style rule. I've also put the second paragraph on the page in the class bottom, and I've added the clear: both property to it. The results are in Figure 9.11.

Output

Figure 9.11. A page with a <div> floated to the right.

The <div> is moved over to the right side of the page, and the first paragraph appears next to it. The float: right property indicates that the rest of the page's content should flow around it. The bottom paragraph does not flow around the div because I've applied the clear: both property to it, which cancels any float that has been set. The options for float are easy to remember: left, right, and none. The options for clear are none, left, right, and both.

Using the clear property, you have the option of clearing either the left or right float without canceling both at the same time. This is useful if you have a long column on the right and a short one on the left and you want to maintain the float on the right even though you're canceling it on the left (or vice versa).

Now let's look at how floated elements work together. Figure 9.12 shows what happens when you have two right-floating elements together, and Figure 9.13 shows the effect with a left-floating element and a right-floating element.

Figure 9.12. Two right-floating elements together.

Figure 9.13. A left-floating and a right-floating element together.

As you can see, when you put two floating elements together, they appear next to each other. If you want the second one to appear below the first, you need to use the clear property as well as the float property in the rule, as shown in this style sheet:

Input

.right {   border: 3px solid black;   padding: 10px;   margin: 10px;   float: right;   width: 33%; } #second { clear: right; } .bottom { clear: both; }

The additional <div> I've added has been given the ID second, so that it inherits all the styles of the class right and also the style rule associated with the ID second. The result is in Figure 9.14.

Output

Figure 9.14. Two floating elements that are aligned vertically.