Box Properties 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. file:///G|/1/0672328860/ch09lev1sec4.html (5 von 15) [19.12.2006 13:49:10] Box Properties 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. [View full size image] file:///G|/1/0672328860/ch09lev1sec4.html (6 von 15) [19.12.2006 13:49:10] Box Properties 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 file:///G|/1/0672328860/ch09lev1sec4.html (7 von 15) [19.12.2006 13:49:10] Box Properties 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. [View full size image] 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. file:///G|/1/0672328860/ch09lev1sec4.html (8 von 15) [19.12.2006 13:49:10] Box Properties 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. [View full size image] 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. file:///G|/1/0672328860/ch09lev1sec4.html (9 von 15) [19.12.2006 13:49:10] Box Properties Figure 9.9. Modified border properties in Internet Explorer. [View full size image] 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. [View full size image] file:///G|/1/0672328860/ch09lev1sec4.html (10 von 15) [19.12.2006 13:49:10] Box Properties 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 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 file:///G|/1/0672328860/ch09lev1sec4.html (11 von 15) [19.12.2006 13:49:10] Box Properties 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 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. [View full size image] file:///G|/1/0672328860/ch09lev1sec4.html (12 von 15) [19.12.2006 13:49:10] Box Properties 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. [View full size image] Figure 9.13. A left-floating and a right-floating element together. [View full size image] file:///G|/1/0672328860/ch09lev1sec4.html (13 von 15) [19.12.2006 13:49:10] Box Properties 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. [View full size image] file:///G|/1/0672328860/ch09lev1sec4.html (14 von 15) [19.12.2006 13:49:10] . 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. 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 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).