HTML and CSS Reference
In-Depth Information
Input
▼
.inner { border: 2px dotted black;
background-color: white;
padding: 15px;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.
Output
FIGURE 8.7
A centered
<div>
.
CAUTION
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.
TIP
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.
