In the past few years, the primary problem with positioning was that properties for positioning had inconsistent browser support. With more sophisticated browsers, it isn’t the positioning that’s the problem, but ensuring that sites built with CSS layout methods gracefully degrade for browsers with limited or no CSS support.
Tables have long been the de facto method by which to create layouts, and probably will remain so for some time to come—at least for many designers. Nevertheless, the power of CSS is coming into its own, and many designers are making the daring switch.
Even if you’re not instantly able to apply CSS layouts to your professional work, it’s a good idea to begin incorporating CSS layouts into your portfolios as much as you can.
Positioning schemes relate to the aspects of how content is presented on a canvas using CSS. First I’ll define each scheme, and then I’ll provide helpful visual examples of each.
There are several schemes for positioning:
Normal Flow Normal flow content is unpositioned, unfloated content that follows the normal way a browser manages that content. Normal flow works on the principles of block and inline boxes (discussed in Chapter 2, “Learning CSS Theory”). Block boxes are comprised of a containing block and its descendant block boxes. Inline boxes are boxes that are placed along the horizon of a block box, beginning at the top of that block.
Floats While not specific to positioning in the purest sense, floats are a method of laying out boxes. In the float scheme, boxes are first laid out by the normal flow rules. Then, they are removed from the flow and shifted to the left or right. You’ll read more about how this works in the “About Floats” section later in the chapter.
Absolute Positioning In this model, a given box is removed from the normal flow, so it doesn’t follow the same principles. This means that there is no relationship to that box to any of its sibling boxes. However, it is positioned specifically within its containing block. Unlike normal flow and float schemes, absolutely positioned elements are positioned based on the containing block, not the location where the element actually resides within the normal flow.
Relative Positioning While relative positioning is considered to be part of the Normal Flow positioning scheme in the CSS2 specification, from a design standpoint it’s best to describe it as a unique scheme. Using relative positioning means that whatever element you are positioning will be positioned relative to where it would normally fall in normal flow, and then moved into the position defined.
Positioning schemes are applied using two CSS properties, position and float, and any associated values. Since floating is quite a bit different than positioning, I’ll discuss floating in its own section, "About Floats" in just a bit. For now, I’ll focus on the position property.
The position property offers four possible values, each with different uses. Table 6.1 describes these properties and their meanings.
|
Value |
Meaning |
|---|---|
|
Static |
A normal box within the normal flow. This is the default value prior to positioning. |
|
Relative |
A positioned box that is first positioned according to normal flow, then offset relative to that position using offset values (see “Box Offsets” later in this chapter). |
|
Absolute |
A positioned box offset to box offset values. An absolute box is not positioned within the normal flow. |
|
Fixed |
The box is positioned using the absolute method (and therefore does not use the normal flow scheme). The box is, however, fixed with respect to the viewport— in a browser, this is the browser window. |
To write a positioning rule, follow these steps:
Type in a selector and declaration block. I’m going to create an ID rule so I can position whatever element bears that ID value.
#content {
}
Add the position property:
#content {
position:
}
Add a value:
#content {
position: relative;
}
Of course, you’ll need to add other properties and values for any positioning rules you create. These rules will depend upon the whether you choose to position an item relatively, absolutely, fixed, or floated.
If you’d like to position an element using the position property, you have to first create a position rule as you’ve just done. Then, you’ll want to use a box property and associated value or values to define the offset of that box.
| Note |
You can only use box offsets with relative, absolute, or fixed property values. |
The four box offset properties, their values, and their meanings are in Table 6.2.
|
Property |
Values |
Meaning |
|---|---|---|
|
Top |
Length Measurement |
Specifies how far a box’s top edge is offset below the top of the containing block. |
|
Right |
Length Measurement |
Specifies how far a box’s right edge is offset to the left of the right edge containing block. |
|
Bottom |
Length Measurement |
Specifies how far a box’s bottom edge is offset above the bottom of the containing block. |
|
Left |
Length Measurement |
Specifies how far a box’s left edge is offset to the right of the left edge of the containing lock. |
Tip value of auto will offset the position in question with regards to the vertical measurements of an absolutely positioned element. This measurement has no visual effect on relatively positioned elements.
To get a better idea of how this works, I’ve provided a series of visuals to help you see what the differences between these somewhat complicated ideas are. Figure 6.1 shows a box, positioned relatively (within normal flow) and then offset 100 pixels from the top (6.1A).
Figure 6.2 is a box, relatively positioned and offset from the bottom a total of 10 pixels from the normal flow (6.2A). You can see how this causes the box to push up above the viewport (6.2B).
In Figure 6.3, you see a relatively positioned box offset to the right at 10 pixels (6.3A).
Finally, in 6.4, a relatively positioned box is offset to the left 100 pixels (6.4A).
| Note |
Remember, any relatively positioned box will first fall into the normal flow and then be positioned according to these values. An absolutely positioned box is offset to the containing block itself. Of course, you can (and will) combine offsetting values when positioning. Listing 6.1 describes an absolutely positioned box of text. I’ve included the border property so you can envision the box itself (6.5A). |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Positioning</title>
<style type="text/css">
#quote {
position: absolute;
border: 2px dotted red;
top: 100px;
left: 50px;
right: 100px;
}
</style>
</head>
<body>
<h1>Sir Arthur Eddington said:</h1>
<p id="quote">"For the truth of the conclusions of physical science,
observation is the supreme Court of Appeal. It does not follow that every
item which we confidently accept as physical knowledge has actually been
certified by the Court; our confidence is that it would be certified by the
Court if it were submitted. But it does follow that every item of physical
knowledge is of a form which might be
submitted to the Court. It must be such that we can specify (although it may be impracticable to carry out) an
observational procedure which would decide whether it is true or not. Clearly
a statement cannot be tested by observation unless it is an assertion about
the results of observation. Every item of physical knowledge must therefore
be an assertion of what has been or would be the result of carrying out a
specified observational procedure."</p>
</body>
</html>
Figure 6.5 shows the positioned box.
Floating begins with a pretty basic premise: shift a box to the left or the right on the current line. To demonstrate float simply, consider Listing 6.2, which floats two images, one to the left, and one to the right.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Positioning</title>
<style type="text/css">
#logoMain {
float: left;
}
#logoSub {
float: right;
}
</style>
</head>
<body>
<img id="logoMain" src="header.gif" width="300" height="100" alt="supah industries" />
<img id="logoSub" src="footer.gif" width="200" height="50" alt="supah industries" />
</body>
</html>
Figure 6.6 shows the two floated images.
Floating is especially helpful when you want to flow other content around the side of a floated box.
In a sense, this is analogous to marking up an image using the align attribute and a right or left value in HTML or XHTML Transitional. In HTML or XHTML Transitional, you can further modify with hspace and vspace attributes:
<img src="my.gif" width="50" height="50" align="left" hspace="10" vspace="10">
This will cause any content to flow to the right and bottom of the image.
In CSS, using float enables you to do the same thing, but with much more precision and detail because you can use margins, padding, and borders with specific values to control the look.
Listing 6.3 shows an example of a floated logo image and content flowing to the right. You’ll notice I provided padding for the image to the right and bottom, so the text flows around the image with some needed white space in between. Without the padding, the text would jut right up against the image, which makes reading difficult.
Tip Many designers prefer to use margins for images, as not all browsers honor padding set to images. This problem is particularly apparent in Internet Explorer for Windows. But, from a strict perspective, padding is the appropriate property to use.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Positioning</title>
<style type="text/css">
#logoMain {
float: left;
padding-right: 20px;
padding-bottom: 10px;
}
p {
font: 14px Arial;
}
</style>
</head>
<body>
<p><img id="logoMain" src="header.gif" width="300" height="100" alt="supah industries" /></p>
<p>Welcome to Supah Cool Industries. The goal of this web site is to
provide you with up-to-date information about all the Supah Cool things
we do. We like to make logos, especially in blue and orange. We like to start
the day with coffee and end it with a nice red wine. We like to make
photos, especially of memorable images. We travel when we can to talk to
other Supah Cool Industry groups around the world. We prefer meeting in
places such as Hawaii, Greece, and off the coast of Spain. We probably
don’t sell a lot of stuff, but we are supah cool, which is really all that
matters to us, anyway. If you are interested in joining up with Supah Cool
Industries, you’ll want to check the employment page. Which we haven’t put
up just yet. We think our webmaster went to the donut shop, but we’re not
quite sure.</p>
</body>
</html>
You can see the results of using float in Figure 6.7.
To help you visualize how the padding provides specific amounts of white space to the right and bottom of the image, I created an outline within the graphic itself (Figure 6.8). The white space you see between the outline on the image and the text itself (6.8A) is the result of the padding property and associated values.
Of course, you can create the opposite effect by floating the image to the right. In that case, the content will flow to the left. You’ll also want to alter the padding options to pad to the right and bottom rather than the left and bottom (Listing 6.4).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Positioning</title>
<style type="text/css">
#logoMain {
float: right;
padding-left: 20px;
padding-bottom: 10px;
}
p {
font: 14px Arial;
}
</style>
</head>
<body>
<p><img id="logoMain" src="header-stroke.gif" width="300" height="100" alt="supah industries" /></p>
<<p>Welcome to Supah Cool Industries. The goal of this web site is to
provide you with up-to-date information about all the Supah Cool things
we do. We like to make logos, especially in blue and orange. We like to start
the day with coffee and end it with a nice red wine. We like to make
photos, especially of memorable images. We travel when we can to talk to
other Supah Cool Industry groups around the world. We prefer meeting in
places such as Hawaii, Greece, and off the coast of Spain. We probably
don’t sell a lot of stuff, but we are supah cool, which is really all that
matters to us, anyway. If you are interested in joining up with Supah Cool
Industries, you’ll want to check the employment page. Which we haven’t put
up just yet. We think our webmaster went to the donut shop, but we’re not
quite sure.</p>
</body>
</html>
I left the outlined image in place so you can see the effect. It’s somewhat different because the text content that’s flowing around the image creates what is referred to as ragged right.
Figure 6.9 shows the edgy results.
Instead of a tight padding between the right edge of the text and the left edge of the image, it’s more free-form. This is perfectly okay for many designers, but if you justify the text, you can regain that straight edge:
p {
font: 14px Arial;
text-align: justify;
}
Figure 6.10 shows the smoother results.
Despite the obvious value that flow provides, you may wish to prevent content from flowing around a float. You can do this using the clear property and any one of its values, described in Table 6.3.
|
Value |
Description |
|---|---|
|
Left |
The top margin of a nonfloated box is increased so that its top border edge is below the bottom margin edge of a left-floated box. |
|
Right |
The top margin of the box is increased so that its top border edge is below the bottom margin edge of any right-floated boxes. |
|
Both |
The box is moved below all floating boxes. |
|
None |
There are no constraints on the box whatsoever. |
Here, I’ve cleared to the left and right of a paragraph, using the both value for the clear property:
#logoMain {
float: right;
padding-right: 20px;
padding-bottom: 10px;
}
p {
font: 14px Arial;
clear: both;
}
Figure 6.11 shows how the resulting paragraph is moved all the way below the box containing the logo.
Using a value of none will look the same as the original float sample without the use of clear.
Along with positioning along the x and y axes, there is a third axis defined in CSS. This is called z-axis, and refers to a stacking order that you can visualize by imagining boxes overlapping. The box that is closest to the front of the screen is considered to be in front of or on top of the stack, and the box farthest away is considered to be the bottom of the stack.
This kind of positioning is especially helpful in creating browser-based dynamic content using DOM technologies and scripting (DHTML). Z-axis positioning is controlled by the z-index property, which has the following values and meanings:
Auto A value of auto will keep the generated box’s stacking order as its parent.
.logo {
position: absolute;
left: 25px;
top: 25px;
z-index: auto;
}
Integer An integer value will position a box within a stacking context.
.logo {
position: absolute;
left: 25px;
top: 25px;
z-index: 1;
}
In Listing 6.5, I created three ID selectors. In each division, I added a blank graphic and styled borders for each of the divs to help you with the visualization of z-axis positioning with z-index.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Z-Axis Positioning</title>
<style type="text/css">
#bottom {
position: absolute;
left: 100px;
top: 25px;
z-index: 1;
border: 1px solid black;
}
#middle {
position: absolute;
left: 90px;
top: 25px;
z-index: 2;
border: 1px dotted red;
}
#top {
position: absolute;
left: 80px;
top: 25px;
z-index: 3;
border: 1px dashed green;
}
</style>
</head>
<body>
<div id="top"><img src="white.gif" width="300" height="300" alt="" border="0"></div>
<div id="middle"><img src="white.gif" width="300" height="300" alt="" border="0"></div>
<div id="bottom"><img src="white.gif" width="300" height="300" alt="" border="0"></div>
</body>
</html>
Figure 6.12 shows the order. The top division has a black outline (6.12A), the middle division has a red dotted outline (6.12B), and the bottom division has a dashed green outline (6.12C).
