The default positioning method for all elements is “static”, that is, immediately after the document’s previous element. To place any element in any other position, use CSS to change the default to either float or absolute.
APPLYING FLOAT POSITIONING
Float positioning often is useful when a layout is in columns, at least in part. To float an element is to have it move as far as possible either to the right or left; text then “wraps” around the element.
Simple columns are constructed by floating several different elements in turn. Suppose you need to produce four-column layout of textual content. Style each of the pieces of content that should appear in successive columns as float positioned; each element “floats” to the side, but is kept separate from the ones before and after it. Note that in this kind of column, text which overruns the bottom of one column does not flow to the top of the next one.
USE FLOAT POSITIONING WITH MULTI-COLUMNS
GET READY. To apply float positioning to multiple columns, perform the following steps:
1. Create the file e5.html with the following contents:
<!doctype html>
<!-- This is e5.html. -->
<html>
background-color: lightskyblue;
}
#col2 {
float: left;
width: 120px;
background-color: yellow;
}
</style>
</head>
<body>
<h1>Float positioning</h1>
<p id = "col1">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultricesviverra velit.
<p id = "col2">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
CERTIFICATION READY How is float positioning used?
3 .1
X
REFManaging content flow and using columns for readability are covered in detail in Lesson 6.
2. Display e5.html, as shown in Figure 4-11. Note how content appears in columns, indicated by the background colors which appear behind the text.
3. In the browser, col1 and col2 appear as two fixed-width columns, and col3 fills up any remaining space. If you change the two CSS float attributes from left to right, how does the display appear?
4. Make the change.
5. Were you correct? Did display of the updated HTML source look as you expect?
6. Close the e5.html file. Leave the editing tool and Web browser open if you’re continuing immediately to the next section.
APPLYING ABSOLUTE POSITIONING
With absolute positioning, an element is removed from its position within the body of a document and placed at a geometric position in the display. “Geometric position” here means a location a definite distance from two sides of the display—the top and the right-hand sides, for example.
Figure 4-11
Multiple columns with the float attribute applied
This section and following section do not always present complete HTML and CSS mark-up; they instead show only crucial lines. This kind of abbreviation is common in reference materials and everyday communications among developers. You are expected to embed such a line in the larger source file in the correct position. This is the equivalent of a lesson in cleaning an automobile’s spark plugs, which assumes you already know how to start the engine, open the hood, hold a wrench, and so on.
TAKE NOTE
*
The “Lorem ipsum” text is called filler or dummy text, commonly used in design circles.
While it has the appearance of Latin, it in fact is not meaningful. It’s just standard text that looks like content in its sequence and frequency of characters. It’s easy to gener-ate dummy text in Word, for example, by typing =lorem() into a blank document and pressing the Enter key.
TAKE NOTE
*
<p id = "col3">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
</body>
</html>
USE ABSOLUTE POSITIONING WITH MULTI-COLUMNS
GET READY. To apply absolute positioning to multiple columns, perform the following steps:
1. Create e6.html by opening e5.html saving a copy as e6.html.
2. Replace the comment at the top with:
<!-- This is e6.html. -->
Replace the content within the <head> tags with the following:
<title>Absolute positioning</title>
<style type = 'text/css'>
#col1 {
position: absolute;
bottom: 100px;
right: 100px;
background-color: lightskyblue;
}
#col2 {
background-color: yellow;
}
</style>
3. Within the body element, change the <h1> heading to:
<h1>Absolute positioning</h1>
4. Display e6.html, as shown in Figure 4-12. In this example, the col2 (yellow background) and col3 (no colored background) paragraphs appear “normal,” near the top of the dis-play. Col1, however, ends at a position locked to the lower-left of the displaying window.
5. Resize the window and see how the three different paragraphs adjust.
6. Close the e6.html file. Leave the editing tool and Web browser open if you’re continuing immediately to the next section.
Absolute positioning generally hasn’t been used in Web work as much as float positioning.
Mobile applications often have a display window of a known, definite, and relatively small size, though. For mobile applications, in contrast to the majority of Web applications, it is relatively common to use absolute positioning.
Figure 4-12
Multiple columns with the absolute attribute applied
Another crucial concept in HTML design is the bounding box. This section explains overflow in relation to bounding boxes.