ptg 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 0. (When you’re setting a property to 0 there’s no need to specify a unit.) The results in Figure 8.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; } 186 LESSON 8: Using CSS to Style a Site Output . FIGURE 8.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 hap- pens when I add some margin and padding to the outer <div>, too. 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 whitespace. (I discuss backgrounds and background colors in the next les- son.) The results are in Figure 8.6. Here’s the new style sheet: Input ▼ .outer { border: 2px solid black; background-color: gray; padding: 15px; margin: 40px; } .inner { border: 2px dotted black; background-color: white; padding: 15px; margin: 15px; } Download from www.wowebook.com ptg Output . FIGURE 8.6 Both the inner <div> and outer <div> have margin and padding. The Box Model 187 8 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 whitespace 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 back- ground color is applied to the padding but not to the margin. So, the 15-pixel margin out- side 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 exam- ple, 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. You already know that to center text within a box, the text-align property is used. The question now is this: How do 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 val- ues for the margin property. So, to center a <div> horizontally, the following style sheet is used. (The newly centered <div> is in Figure 8.7.) Download from www.wowebook.com ptg Input ▼ .inner { border: 2px dotted black; background-color: white; padding: 15px; width: 50%; margin-left: auto; margin-right: auto; } 188 LESSON 8: Using CSS to Style a Site Output . FIGURE 8.7 A centered <div>. Browsers care about your Document Type Definition (DTD) set- tings. For example, if you don’t indicate in your document that you’re using HTML 4.01, XHTML 1.0, or HTML5, 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. You should always use a DTD that cor- rectly indicates which version of HTML is used on the page. CAUTION If you want elements to overlap each other, you can apply negative margins to them rather than positive margins. I used the width property in that style sheet to shrink the <div> so that it could be cen- tered. I explain how to resize elements using CSS later in the lesson. Another thing to remember is that the <body> of the page is a box, too. Here’s a style sheet that includes new values for the border, margin, and padding properties of the <body> tag. It also includes some changes to the outer <div> to illustrate how the changes to the <body> tag work. You can see the updated page in Figure 8.8. TIP Download from www.wowebook.com ptg Input ▼ .outer { border: 2px solid black; background-color: gray; padding: 15px; } .inner { border: 2px dotted black; background-color: white; padding: 15px; margin: 15px; } body { margin: 20px; border: 3px solid blue; padding: 20px; background-color: yellow; The Box Model 189 8 Output . FIGURE 8.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. However, unlike other boxes, the background color is applied to the margin as well as the padding. Controlling Size and Element Display The one box in the box model I haven’t discussed is the content box. For starters, there are two types of content boxes: block and inline. In previous lessons, I’ve discussed block-level elements versus inline elements—this distinction is important in CSS. Block elements are, by default, as wide as the container you place them within, and you can modify their height and width using CSS. Block elements are also preceded and followed by line breaks. Inline elements are only as wide as they need to be to display their con- tents, as well as the margins, borders, and padding that you apply to them. Each element is, by default, either a block element or an inline element, but CSS pro- vides the display property to allow you to change this behavior. The block property sup- ports three values: block, inline, and none. For example, if you want the elements in a list to appear inline rather than each appearing on its own line, as shown in Figure 8.9, you use the following style: ul.inline li { display: inline } Download from www.wowebook.com ptg FIGURE 8.9 Inline list items. 190 LESSON 8: Using CSS to Style a Site Setting the display property to none removes the selected elements from the page entirely. Hiding elements with this property is useful if you want to use JavaScript to dynamically hide and show items on the page. Using JavaScript to modify page styles is discussed starting in Lesson 14, “Introducing JavaScript.” There are two properties for controlling the size of a block: width and height. They enable you to set the size of the box using any of the units of measurement mentioned previously. If you use a percentage for the height or width, that percentage is applied to the size of the containing element. 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; } The following paragraph will appear to be very narrow, but the box in which it resides will be as wide as the browser window unless you specify a width. <p>one.<br />two.<br />three.<br /></p> It’s possible to set maximum and minimum heights and widths for elements to account for differences in the size of users’ browser windows. The properties that enable you to do so are max-width, min-width, max-height, and min-height. Let’s say you’ve created a page design that only looks right if it’s at least 600 pixels wide. You could use the following style:#container { min-width: 600px } The element with the ID container will expand to fit the size of the browser window as long as it’s at least 600 pixels wide. If the browser is smaller than 600 pixels wide, the contents of the element will scroll off the screen. Likewise, you may want to constrain the maximum size of an element so that lines of text do not become so long that they’re difficult to read. To do so, use the following style: #container { max-width: 800px } Download from www.wowebook.com ptg You can also use both styles together to keep the size of your page within a certain range, regardless of the size of the user’s browser window: #container { min-width: 600px; max-width: 800px; } Normally elements in HTML are sized to fit the content that is placed within them. However, if you constrain the size of an element with a size or a maximum size and then place content inside the element that won’t fit, the browser has to decide what to do with it. By default, when content won’t fit inside its box, the browser just displays the over- flow as best it can. As you can see from Figure 8.10, the results are not always pretty. The Box Model 191 8 FIGURE 8.10 Content that is too large for its container. The border shows the dimensions of the box specified in the style sheet. Because there’s too much text to fit inside the box, it runs over the border and down the page. Using the CSS overflow property, you can tell the browser what to do when these situations arise. The values are visible (this is the default), hidden, scroll, auto, and inherit. You can see how the different overflow settings look in Figure 8.11. FIGURE 8.11 Different ways of dealing with overflow. Download from www.wowebook.com ptg When overflow is hidden, the content that does not fit in the box is not displayed at all. Both scroll and auto add scrollbars to enable users to view the entire contents of the box. When the setting is scroll, the scrollbars are always displayed, whereas when the setting is auto, the scrollbars display only if needed. When overflow is visible, content that overflows the box is not taken into account when laying out other items on the page and the overflow content bleeds onto other content on the page. When you are sizing ele- ments on the page manually, you should always account for potential overflow so that it doesn’t break the layout of your page. Float Normally, block-level elements flow down the page from top to bottom. If you want to alter the normal flow of the page, you can use absolute positioning, which I discuss in a bit, or you can use the float property. The float property is used to indicate that an ele- ment 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 8.12. 192 LESSON 8: Using CSS to Style a Site FIGURE 8.12 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, but that’s it. Here’s the source code to the page, with the addition of a few addi- tional properties that demonstrate how float works: Input ▼ <!DOCTYPE html> <html> <head> <title>Floated Elements</title> Download from www.wowebook.com ptg <style type=”text/css” media=”screen”> .right { border: 3px solid black; padding: 10px; margin: 10px; float: right; width: 33%; } .bottom { clear: both; } </style> </head> <body> <p class=”right”> 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 class=”main”> 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 class=”bottom”> 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 the float property for elements with the class “right” to right. I’ve also added some padding, a margin, and a border to that class for aesthetic purposes and set the width for that class to 33% so that it isn’t as wide as the browser window. I’ve also put the second paragraph on the page in the class bottom, and I’ve added the clear: both property to it. Figure 8.13 shows the results. The Box Model 193 8 Download from www.wowebook.com ptg Output . FIGURE 8.13 A page with a <div> floated to the right. 194 LESSON 8: Using CSS to Style a Site 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 proves 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 8.14 shows what happens when you have two right-floating elements together, and Figure 8.15 shows the effect with a left-floating element and a right-floating element. FIGURE 8.14 Two right-floating elements together. Download from www.wowebook.com ptg 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 8.16. The Box Model 195 8 FIGURE 8.15 A left-floating and a right-floating ele- ment together. Download from www.wowebook.com . 8 .14 shows what happens when you have two right-floating elements together, and Figure 8 .15 shows the effect with a left-floating element and a right-floating element. FIGURE 8 .14 Two right-floating elements. about your Document Type Definition (DTD) set- tings. For example, if you don’t indicate in your document that you’re using HTML 4. 01, XHTML 1. 0, or HTML5 , Internet Explorer will not honor things. ▼ .inner { border: 2px dotted black; background-color: white; padding: 15 px; width: 50%; margin-left: auto; margin-right: auto; } 18 8 LESSON 8: Using CSS to Style a Site Output . FIGURE 8.7 A centered