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

Practice with Normal Flow and Nested Elements
Launch a text editor and open the box1.html file from the student files. Save the file
with the name box2.html. This page is displayed in Figure 6.6.
Edit the code. You will not modify the CSS but you will edit the XHTML. Delete the
content from the body section of the Web page. Add the following code to configure
two <div> elements—one nested inside the other.
< div class="div1">
This is the outer box.
<div class="div2">
This is the inner box.
</div>
</div>
Save the file. Launch a browser and test your page. It should look similar to the one
shown in Figure 6.6. Notice how the browser renders the nested <div> elements—this
is an example of normal flow. The student files contain a sample solution at
Chapter6/box2.html.
The examples in the Hands-On Practice happened to use two <divs> . However, the
box model applies to XHTML elements in general—not just to <divs> . You will get
more practice using the box model in this chapter. Notice that since the CSS did not use
any configurations for positioning, normal flow was used and the second box is nested
within the first box because it is coded inside the first <div> in the XHTML. Next, we
will take a look at some properties that affect positioning: position , float , display ,
and z-index .
6.3 CSS Positioning Properties
You've seen how normal flow causes the browser to render the elements in the order
that they appear in the XHTML source code. When using CSS for page layout there are
times where you will want to specify the location of an element on the page—either the
absolute pixel location, the location relative to where the element would normally dis-
play, or floating on the page. There are even times when you will want to modify the
way an element displays or cause an element to appear partially or completely over
another element. The CSS properties used to accomplish these tasks are discussed next.
Relative and Absolute Positioning
Use relative positioning to change the location of an element slightly, relative to where it
would otherwise appear in normal flow. Use the position:relative property along
with either a left, right, and/or top property. The left property configures the position
of the element in relation to the left side of the containing element. The right property
sets the position of the element in relation to the right side of the containing element.
The top property indicates the position of the element in relation to the top of the doc-
ument area in the containing element. The bottom property configures the position of
the element in relation to the bottom of the containing element.