As explained at the beginning of this chapter, you can run into trouble when you try to use CSS positioning to place every element on a page. Because it's impossible to predict all possible combinations of browsers and settings your visitors will use, CSS-controlled positioning works best as a tactical weapon. Use it sparingly to provide exact placement for specific elements.
In this section, you'll learn how to use absolute positioning to add small but visually important details to your page design, how to absolutely position certain layout elements, and how to cement important page elements in place while the rest of the content scrolls.
Figure 13-7. The visibility property is useful for hiding part of a page that you later want to reveal. The top image shows movie listings. Moving the mouse over one of the images makes a previously invisible pop-up message appear. Programmers usually use JavaScript to create this kind of effect, but you can use the CSS :hover pseudo-class to make an invisible element visible when a visitor mouses over a link.
One of the most effective ways to use positioning is to place small items relative to other elements on a page. Absolute positioning can simulate the kind of right alignment you get with floats. In the first example in Figure 13-8, the date on the top headline is a bit overbearing, but with CSS you can reformat it and move it to the right edge of the bottom headline.
In order to style the date separately from the rest of the headline, you need to enclose the date in an HTML tag. The <span> tag (ID Selectors: Specific Page Elements) is a popular choice for applying a class to a chunk of inline text to style it independently from the rest of a paragraph.
<h1><span class="date">Nov. 10, 2006</span> CosmoFarmer Bought By Google</h1>
Now it's a matter of creating the styles. First, you need to give the containing element—in this example, the <h1> tag—a relative position value. Then, apply an absolute position to the item you wish to place—the date. Here's the CSS for the bottom image in #1 of Figure 13-8:
h1 {
position: relative;
width: 100%;
border-bottom: 1px dashed #999999;
}
h1 span.date {
position: absolute;
bottom: 0;
right: 0;
font-size: .5em;
background-color: #E9E9E9;
color: black;
padding: 2px 7px 0 7px;
}Some of the properties listed above, like border-bottom, are just for looks. The crucial properties are bolded: position, bottom, and right. Once you give the headline a relative position, you can position the <span> containing the date in the lower-right corner of the headline by setting both the bottom and right properties to 0.
Note
Internet Explorer 6 and earlier can get the placement of an element wrong when you use the bottom or right properties. In this example, the width: 100%; declaration in the h1 tag style fixes the problem, as discussed in the box on Tutorial: Multiple-Column Layouts.
Figure 13-8. Absolute positioning is perfect for simple design details like placing a date in the lower-right corner of a headline (top), punching an image out of its containing block (middle), or placing a caption directly on top of a photo (bottom). (You'll learn the caption trick in the tutorial on Adding a Caption to a Photo.)
You can also use positioning to make an item appear to poke out of another element. In the second example in Figure 13-8, the top image shows a headline with a graphic. That is, the <img> tag is placed inside the <h1> tag as part of the headline. Using absolute positioning and negative top and left property values moves the image to the headline's left and pushes it out beyond the top and left edges. Here's the CSS that produces that example:
h1 {
position: relative;
margin-top: 35px;
padding-left: 55px;
border-bottom: 1px dashed #999999;
}
h1 img {
position: absolute;
top: -30px;
left: -30px;
}The basic concept is the same as the previous example, but with a few additions. First, the image's top and left values are negative, so the graphic actually appears 30 pixels above the top of the headline and 30 pixels to the left of the headline's left edge. Be careful when you use negative values. They can position an element partially (or entirely) off a page or make the element cover other content on the page. To prevent a negatively positioned element from sticking out of the browser window, add enough margin or padding to either the body element or the enclosing, relatively positioned tag—the <h1> tag in this example. The extra margin provides enough space for the protruding image. In this case, to prevent the image from overlapping any content above the headline, add a significant top margin. The left padding of 55 pixels also moves the text of the headline out from under the absolutely positioned image.
As in the previous example, Internet Explorer is ready to make trouble. What's worse, adding width: 100% doesn't even fix things this time. Since there's padding on the <h1> tag, setting its width to 100 percent actually makes the <h1> wider than 100 percent of the page (see Calculating a Box's Actual Width and Height for the reason why). There's a solution, but it uses a nonstandard CSS property—zoom. Simply add zoom: 1 to the <h1> tag style:
h1 {
position: relative;
margin-top: 35px;
padding-left: 55px;
border-bottom: 1px dashed #999999;
zoom: 1;
}Note
The zoom property doesn't cause harm in other browsers, although it prevents your CSS from validating correctly (External Style Sheets). You can use Internet Explorer's conditional comments to hide the nonstandard property, as discussed on Isolate CSS for IE with Conditional Comments. An even better solution is to create a separate external style sheet just for IE (see Using Multiple Style Sheets).
As mentioned on When (and Where) to Use Relative Positioning, trying to position every last element on a page in exact spots in a browser window is usually an exercise in frustration. Using absolute positioning judiciously, you can build many standard web page layouts (like the ones you saw in the last chapter). This section shows you how to build a three-column, fluid layout using absolute positioning. The page will have a banner, left and right sidebars, a main content area, and a footer for copyright notices.
Note
This section teaches you a generic approach to absolute positioning that you can apply to almost any page layout. For a real hands-on exercise in creating a layout with absolute positioning, turn to the tutorial on Enhancing a Page Banner.
Whenever you use absolute positioning, keep this rule of thumb firmly in mind: Don't try to position everything. To achieve a good layout, you usually have to use absolute positioning on only a couple of page elements.
Here's a simple technique you can use to figure out which elements need positioning. Say you want to build a three-column design, like Figure 13-9, right. First, study how the different sections of the page follow the normal HTML flow, without any CSS positioning (Figure 13-9, left). Then, for each layout element on your page, ask yourself, "Would this be in the right place if I didn't position it at all?"
Figure 13-9. The left diagram demonstrates how to divide the HTML of a page up into sections, each wrapped in a <div> tag with a unique ID. The right diagram shows the final, three-column layout and the types of positioning required: relative positioning for the content wrapper div (R); absolute positioning to place the left and right sidebars correctly (AP). Finally, the main content area needs a little left and right margin to keep it from being covered by the sidebars (arrows).
Here's a walk through the page elements in the left image of Figure 13-9:
The banner. The banner (1) is at the top of the page. That's right where you want it, so it doesn't require absolute positioning. You can use a combination of margins and padding to scoot the content around a little (maybe add some white space above or to the left of the banner).
The content wrapper. This <div> is a special element that holds all other elements on the page (2). Since it holds the page's contents, just ask yourself whether you want the contents to appear below the banner. You do, so you don't need to apply absolute positioning here either.
The main content. The main part of the page is also directly under the banner (3). You'll have to indent it on the left and right sides to make room for the sidebars, but you don't need absolute positioning to do that.
The left sidebar. In Figure 13-9, left, it appears way down the page underneath the main content (4). Is that where it should be? Definitely not, so this section needs absolute positioning.
The right sidebar. Instead of appearing on the right as its name implies, this one (5) appears way down the page below the left sidebar. Here again, you need absolute positioning to put this element in its rightful place—under the banner and on the right side of the page.
The footer. In the left image, the footer appears at the bottom of the page (6)—just where you want it, so no need for any special positioning.
Note
It's usually a bad idea to use absolute positioning to place a footer at the bottom of the browser window. If the page's content runs longer than the height of the browser window, then the footer scrolls along with—and rides on top of—other page elements when your visitor scrolls. A better solution is fixed positioning, as described on How Positioning Properties Work.
Now that you know how to decide where to use CSS positioning in your design, here's an overview of the process for building a three-column layout:
Add <div> tags for each section of the page.
These tags let you divide the page's content into different layout containers for the banner, sidebar, and so on. As with float layouts discussed in the previous chapter, you'll add IDs to these container divs so you can create specific CSS styles to format each part of the page (like <div id="banner">).
The left image in Figure 13-9 shows the order in which the different <div> tags for a three-column layout appear in the HTML. One nice thing about absolute positioning is that you don't have to worry (as you do with float layouts) about the order of the <div> tags in the HTML. The HTML for any absolutely positioned element can appear anywhere in the flow of the file—directly after the opening <body> tag, just before the closing </body> tag, or somewhere in between. It's the positioning properties that determine where an absolutely positioned element appears onscreen, not its place in the HTML.
Wrap all the HTML for the main content, sidebars, and footer in another <div> tag.
This <div> (Figure 13-9, #2) gathers all of those content sections in one wrapper. Add an ID to the tag so you can style it (<div id="contentWrapper">, for example). This <div> provides a context for positioning the sidebars, as you'll see next.
Give the wrapper <div> a relative position.
Use the position property and the relative value to create a style like this:
#contentWrapper { position: relative; }Remember, if you don't supply a top, left, bottom, or right value for a relatively positioned element, then it appears where it normally would—in this case, directly below the banner. The relative position does change the positioning of elements inside the <div>. Now when you use absolute positioning to place the sidebars—that's the next step—you can set top values relative to the wrapper, not the browser window. That way, if you add more content to the banner and make it taller, the wrapper <div> and everything inside it moves neatly down the page. Without the <div>, your sidebars would be placed relative to the top of the browser window and you'd have to adjust their top values to accommodate the change.
Apply absolute positioning and set widths on the sidebars.
Since all other content on the page fits fine where it is, you need to position only the sidebars. Since you're positioning the sidebars relative to the wrapper <div> that you set up in step 3, you can simply use top and left positions of 0 for the left sidebar and top and right positions of 0 for the right sidebar.
#leftSidebar { position: absolute; left: 0; top: 0; width: 175px; } #rightSidebar { position: absolute; right: 0; top: 0; width: 180px; }The widths constrain the sidebar boxes. When you don't set a width, the sidebars expand to fill as much space as possible, leaving no room for the page's main content.
Adjust margins on the main content.
Since the left and right sidebars have absolute positioning, they're removed from the flow of the page. The main content doesn't even know they exist, so it simply goes about its business and flows right under them. But since the main content is in the right place on the page—below the banner—you don't need to reposition it. All you have to do is scoot it in a bit from the left and right edges to clear the sidebars.
To do so, apply left and right margins to the main content <div>. Set the value of each margin to equal or greater than the sidebar's width:
#mainContent { margin-left: 185px; margin-right: 190px; }In this code, the margins are slightly larger than the widths of each sidebar. It's usually a good idea to increase the margins a little so that there's some visual space between the different elements of the page.
Handsome though it is, this layout has an Achilles' heel. Whenever you use absolutely positioned columns (like these sidebars), the columns can potentially grow to cover up part of a footer or other lower HTML elements (see Figure 13-10). Unlike with float-based layouts, where you can clear an element and force it to appear below a floated column, CSS gives you no way to clear the bottom of a positioned column. The best you can do is find a workaround, as in the next step.
If necessary, add margins to the footer to prevent the sidebars from covering it up.
Your other option: just make sure that any absolutely positioned columns are never taller than the main content. When the main content is long enough, it pushes the footer down below the columns, and you avoid the problem.
Tip
If you like to live on the edge of web innovation, you can try a JavaScript solution to this problem: www.shauninman.com/plete/2006/05/clearance-position-inline-absolute.php.
You can modify this basic page layout technique in any number of ways. Remove the right sidebar and eliminate the right-margin on the main content <div>, and you've got a two-column layout. Or eliminate the left sidebar instead to create a two-column layout, but with the thinner column on the right. You can also use this basic design in a fixed-width layout. Just set a width for the banner and a width for the content wrapper <div> like this:
#banner, #contentWrapper { width: 760px; }Since most web pages are longer than one screen, you may want to keep some page element constantly visible—like a navigation panel, search box, or your site logo. HTML frames were once the only way to keep important fixtures handy as other content scrolled out of sight. But HTML frames have major drawbacks. Since each frame contains a separate web page file, you have to create several HTML files to make one complete web page (called a frameset). Not only are framesets time consuming for the designer, they also make your site hard for search engines to search. And HTML framesets can also wreak havoc for visitors who use screen readers due to vision problems or those who want to print pages from your site.
Figure 13-10. If an absolutely positioned column is longer than any statically positioned content that needs to appear underneath the column, overlap ensues. An easy fix in this case is to indent the footer just as you did the main content area (see step 6 in on Creating CSS-Style Frames Using Fixed Positioning).
Nevertheless, the idea behind frames is still useful, so CSS offers a positioning value that lets you achieve the visual appearance of frames with less work. You can see a page created using the fixed value in Figure 13-11.
Note
Fixed positioning doesn't work with Internet Explorer 6 or earlier. However, with just a little extra CSS (described in step 5 on Creating CSS-Style Frames Using Fixed Positioning), you can make the page look fine in IE 6 (although the "fixed" elements end up scrolling along with everything else). And since Internet Explorer 7 and later do recognize fixed positioning, you can use this technique and get similar results for almost all of your site's visitors.
Figure 13-11. Revisit the Web of yesteryear, but with a lot less code. Using the position property's fixed value, you can emulate the look of HTML frames by fixing some elements in place but still letting visitors scroll through the content of a very long web page. The scrollbar (circled) moves only the large text area; the top and bottom banners and the sidebar stay fixed.
Fixed positioning works much like absolute positioning in that you use the left, top, right, or bottom properties to place the element. Also like absolutely positioned elements, fixed positioning removes an element from the flow of the HTML. It floats above other parts of the page, which simply ignore it.
Here's how you can build the kind of page pictured in Figure 13-11, which has a fixed banner, sidebar and footer, and a scrollable main content area:
Add <div> tags with ID attributes for each section of the page.
You can have four main <div> tags with IDs like banner, sidebar, main, and footer (Figure 13-12). The order in which you place these tags in the HTML doesn't matter. Like absolute positioning, fixed positioning lets you place elements on a page regardless of their HTML order.
Add your material to each <div>.
In general, use the fixed divs for stuff a visitor should always have access to in the areas you wish to be locked in place. In this example, the banner, sidebar, and footer contain the site logo, global site navigation, and copyright notices.
The main content goes into the remaining <div> tag. Don't add too much information to a fixed <div>, however. If a fixed sidebar is taller than the visitor's browser window, he won't be able to see the entire sidebar. And since fixed elements don't scroll, there'll be no way (short of buying a bigger monitor) for that visitor to see the sidebar content that doesn't fit in his browser window.
Create styles for all fixed elements.
The left, right, top, and bottom values are relative to the browser window, so just determine where on the screen you'd like them to go and plug in the values. Specify a width for the elements as well.
Note
Unlike absolute positioning, fixed positioning is always relative to the browser window, even when an element with fixed positioning is placed inside another tag with relative or absolute positioning.
The styles to position the elements numbered 1, 3, and 4 in Figure 13-12 look like this:
#banner { position: fixed; left: 0; top: 0; width: 100% } #sidebar { position: fixed; left: 0; top: 110px; width: 175px; } #footer { position: fixed; bottom: 0; left: 0; width: 100%; }Create the style for the scrollable content area.
Since fixed-positioning elements are removed from the flow of the HTML, other tags on the page have no idea the fixed position elements are there. So, the <div> tag with the page's main content, for example, appears underneath the fixed items. The main task for this style is to use margins to move the contents clear of those areas. (The concept is the same as for absolutely positioned layouts, as discussed on Stacking Elements.)
#main { margin-left: 190px; margin-top: 110px; }Fix the layout for Internet Explorer 6 and earlier.
IE 6 doesn't understand fixed positioning. It treats fixed elements like static elements, in that it doesn't try to place them in exact spots on the page. Depending on how you've ordered your HTML, in IE 6 your page may just look weird, with big margins between the banner and sidebar or worse—the navigation bar and banner may end up below the main content.
The trick is to tell IE 6 to treat the fixed elements like absolutely positioned elements, which takes those elements out of the flow of the page and places them in their rightful places in the browser window.
* html #banner { position: absolute; } * html #sidebar { position: absolute; }Note
These styles use the * html hack to hide their properties from browsers other than IE 6 and earlier (see the box on Wrap Content with Floating Elements). You can also use IE's conditional comments (Isolate CSS for IE with Conditional Comments).
You'll notice that the #footer style isn't listed. You don't want to position the footer absolutely—otherwise it'll travel up the browser window when scrolled, sitting directly on top of the other scrolling content.
In this case, it's best to have the footer appear at the bottom of the page and scroll up into view, just as any unpositioned footer would. (That's why, as mentioned in step 1, you should put the HTML for the footer below the HTML for the main content so it appears at the bottom of the page in IE 6.)
This technique doesn't make IE 6 handle fixed positioning correctly, but it at least places the banner and sidebar in their proper places when the page loads. When someone using IE 6 scrolls the page, the banner and sidebar scroll off the top of the window like other content. In other words, in IE 6 your page works like any ordinary web page, and in IE 7 or 8, Firefox, Safari, and Opera it works even better.
