Designing with CSS – Part 6: Should I Float or Should I Position?
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 files (also 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 <head> 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 the following 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:
<style type="text/css">
/* HEIGHT COMMENT: The height in the following selectors is only
to hold the divs open, as you are only looking at structure in this
tutorial and will not be adding content. In a real page, you wouldn't
use the height property in this manner. Instead, you would allow the
div to collapse around the content*/
body{
margin: 0;
padding: 0;
background-color: #fff;
}
#wrapper{
margin: 0 auto;
width: 770px;
height: 600px;/*See the HEIGHT COMMENT */
background-color: #ccc;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#content{
width: 520px;
margin-left: 230px;
background-color:#ffc;
height: 600px;/*See the HEIGHT COMMENT */
}
#nav{
position: absolute;
width: 200px;
left: 10px;
height: 150px; /*See the HEIGHT COMMENT */
border: 1px solid #000;
background-color: #66f;
}
</style>
Note: Regarding the use of the height property, I have discussed this property (along with its pitfalls) in Part 2 of this series. You can also view the movie below to learn about the height property. In shirt, Internet Explorer implements the height property incorrectly and expands the div. Firefox implements the height property correctly, but 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:
- In Dreamweaver, locate the #wrapper selector in positioned.html.
- Place your cursor after
#wrapper{and press Enter. - Type Position: relative;
- 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
Comments