Page Layout with CSS - Web Development and Design Foundations with XHTML - page 221

Figure 6.7 shows a Web page (see the student files, Chapter6/relative.html) that uses rel-
ative positioning and the left property to configure the placement of a <div> (assigned
to the id mycontent ) to the left of the normal flow. In this case, the containing element
is the body of the Web page.
Figure 6.7
The paragraph is
configured using
relative positioning
The result is that the content of the <div> —the paragraph—is rendered 30 pixels in
from the left where it would normally be placed at the browser's left margin. W3C
Recommendations call for positioning to be applied to any element and Internet
Explorer follows this recommendation. However, cross-browser support of positioning
is more reliable when the <div> element is used for positioning. Notice also how the
padding and background-color properties configure the heading element. The CSS
follows:
#myContent { position: relative;
left: 30px;
font-family: Arial,sans-serif;
}
h1 { background-color: #cccccc;
padding: 5px;
color: #000000;
}
The XHTML source code follows:
<h1>Relative Positioning</h1>
<div id="myContent">
<p>This paragraph uses CSS relative positioning to be placed 30
pixels in on the left side.</p>
</div>
Use absolute positioning to specify the location of an element precisely in a browser
window. The position:absolute property along with either a left , right , and/or
top property is needed to configure the placement.
Figure 6.8 shows a screenshot of a Web page that uses absolute positioning to configure
a <div> (see the student files, Chapter6/absolute.html).
The <div> is assigned to the content id which is positioned 200 pixels in from the left
margin and 100 pixels down from the top of the browser window. The result is that the
paragraph contained within the <div> is rendered 200 pixels in from the left side and
100 pixels down from the top of the document area in the browser window. The width