Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P35 ppsx

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]