Major Problem with Absolute Positioning

As I see it, the major problem with absolute positioning is this: You cannot clear an absolutely positioned element. This could cause problems and it’s something you need to take into account when you consider the structure and layout of your designs. If you want a footer that expands the width of your wrapper, and you are unsure whether the navigation div might end up taller than the content div, then you have a problem.

Recall how you were able to ensure that your footer always appeared below your content when you floated your navigation column by using the clear property. Absolutely positioned elements do not respect this. They just push straight through the footer regardless of any attempts you might make to force the footer below the absolutely positioned element. This can make your page very ugly, as your navigation div pushes right through your footer and out through the bottom of your design.

Open withfooter.html in the Code view and preview the page in Firefox (see Figure 3).

Figure 3. Footer in place with the design still intact

Follow these steps to complete the next process:

1. In the Code view, locate the #nav selector.
2. Change the height value to 700px.
3. Preview your page. Note how the nav div pushes through the footer.
4. Locate the #footer selector
5. Place your cursor after background-color: #036; and press Enter.
6. Type: clear: left;
7. Save your work and preview the page in Firefox.
8. Notice that the nav div still pushes through the footer.

While there is nothing wrong in principle with using positioned divs to create columns, you do need to be 100% sure that any absolutely positioned element will not cause this type of problem. As you have seen in earlier tutorials, a floated layout does not suffer from this type of scenario because you can clear floats.

Surely Absolutely Positioned Elements Have Their Good Points Too?

The answer to that question is yes. When you define an element as being absolutely positioned, it is taken out of the document flow. Unlike a floated element, an absolutely positioned div can be placed just about anywhere in your code. This can present some good search engine optimization opportunities. For example, you could move the nav div out of its current position in the source code and place it below the footer.

Follow these steps to complete the next process:

1. Open withfooter.html in the Code view.
2. Locate the #wrapper and #nav divs in the body of your page.
3. Switch the positions around in the code. Your content div should now be before your nav div in the source order.
4. Preview the page in Firefox. You will see that the nav div drops below the footer.
5. Locate the #nav selector.
6. Locate the left: 10px; property and value.
7. Place your cursor after the closing semicolon (;) and press Enter.
8. Type: top: 0;
9. Preview your page in Firefox again. You will now see that the nav div moves to where it should be.

You now have a position where your content is above your navigation in the source order. This can be a good method for pushing your content at a search engine’s bots. The content that matters now appears higher in the code than it would be with a floated column scenario.

You have now seen two methods of creating a two-column layout. A bit of planning before you dive in will probably help you decide which method to use. Both have their strengths and weaknesses. The choice is yours.

I hope you enjoyed working through this series. I know I enjoyed writing it. I plan to write another series that looks at other aspects of CSS. Stay tuned for it.