Should I Float or Should I Position?

That is the question! You have already learned that to have two block-level elements, like divs, sitting side by side within your pages, you must remove one of them from the flow of the document. In this series, you have achieved that by floating the navigation div to the left. As I discussed in Part 2, floated content is removed from the document flow. You can refresh your memory if you need to by reviewing the float section of that tutorial.

So if you don’t float the navigation div out of the document flow, how else can you achieve this? The answer is by positioning the div with an absolute value. Any element that is positioned absolutely is taken out of the document flow—and, as I’ve discussed, once you take your navigation div out of the document flow, you can have two divs sitting side by side in your document.

In the sample file linked to at the beginning of this article, you will find a page called positioned.html. The CSS for this page is embedded in the section of the page’s code. I have discussed the merits of using an external style sheet in this series and it still holds true. I embedded the CSS in the head of the document for two reasons:

• The CSS you are using is minimal
• It’s easier this way for the tutorial

When you use an absolutely positioned element, you need to be aware that the element containing it needs to be positioned. If the element that contains the absolutely positioned element is not positioned, you will get some rather unexpected results.

Let’s begin by taking a look at the CSS in the positioned.html page:

Note: Regarding the use of the height property, I have discussed this property and its pitfalls in an earlier tutorial. View the movie below again on this subject or read about the pitfalls in Part 2. Internet Explorer implements the height property incorrectly and expands the div. Firefox implements the height property correctly and allows the contents of the div to spill outside the div when the contents exceed the given height.

The only property and value pairs that I have not covered yet in this series can be found in the #nav selector. These include the position: absolute; property and the value pairs that are used to position the div—namely, left: 10px and top: 0;. Notice in the previous code listing that I did not declare zero for the top value. Not declaring a position value is not the same as zero. If you do not specifically declare zero, your div is not truly out of the document flow. Taking a div out of the document flow opens up possibilities for search engine optimization, as you will see on the next page. For now, I have omitted the top property and value in order to show you that declaring zero is not the same as declaring nothing.

Open positioned.html in Dreamweaver and preview it in Firefox (see Figure 1).

Figure 1. Absolutely positioned nav div outside the wrapper div

See how the navigation div has moved outside the wrapper div, shown in gray. This is not what you want. The idea is that the left: 10px; property and value pair should position the navigation div 10 pixels inward from the left of the wrapper div. The fact that the wrapper div is not a positioned element allows the navigation div to move outside its defined boundaries. It will do this until it finds a positioned element or it meets the view port—meaning it flushes up against the left edge of the browser window.

I haven’t declared a top position for the #nav selector because I want it at the top of the wrapper. Because zero is the default, I have no need to declare a value. You can see from Figure 1 that the navigation div has taken its position from the view port. It has the default top value of zero, which sets it tightly against the top of the view port, but the left: 10px; assignment is being taken from the left of the view port rather than the wrapper div. Don’t worry; this is easily corrected.

Follows these steps to complete the next process:

1. In Dreamweaver, locate the #wrapper selector in positioned.html.
2. Place your cursor after #wrapper{ and press Enter.
3. Type Position: relative;
4. Save your work and refresh the browser or preview the positioned.html page again.

You should now see the nav div respect the position setting on the wrapper and move correctly into place (see Figure 2).

Figure 2. Making the nav div respect the position property on the wrapper