CSS Positioning : Introduction and Overview

Introduction and Overview
Position: Static, Relative, Absolute, and Float
Tips on Positioning
Bugs?
Further Reading & Conclusion

Introduction and Overview

Layout designers can easily be confused by positioning with Cascading Style Sheets (aka, "CSS"). And it's no wonder -- there isn't a lot information available on the subject.

I am not an expert, but I hope that this tutorial will help alleviate the confusion.

FYI: This is not an article written to convince you of the benefits of CSS layout or educate you on the alternatives. This is written for people with some grounding in CSS (i.e: you know what a selector is) who want to understand positioning better.

This is not an exhaustive tutorial with lots of examples. If there's a real demand for it, I may be convinced to hand out a bunch of examples. But be sure and check out the links I've provided; they will direct you to more tutorials and lots of examples.

There are a few different kinds of positioning available to us: there are what is known as "positioning schemes" and there are "floats". Because of browser differences in CSS support, there are positioning methods not commonly supported; we will be looking at the most supported ones.

Positioning Properties & Values

Position:Static (Normal Flow)
Position:Relative
Position:Absolute
Floats

Mary
Mary is an active member of the Christian-Web-Masters.Com forums. You can find her there to bug her about anything. Alternately, you can visit her website, and check out some other tutorials and free goodies.

CSS Positioning : Position: Static, Relative, Absolute, and Float

Introduction and Overview
Position: Static, Relative, Absolute, and Float
Tips on Positioning
Bugs?
Further Reading & Conclusion

Position: Static, Relative, Absolute, and Float

Position:Static (Normal Flow)
By default, if you do not specify a position for an element, then it will be positioned according to the page's "normal flow", or where it occurs naturally within the source. It is not necessary to specify that an element be "static", however, there may be times when this is a useful property value.

In normal flow, elements may be "block" or "inline", but not both simultaneously.

Block elements will appear one right on top of another, whereas inline elements will appear right beside each other. Some examples of block elements are divs, paragraphs and headings. Some examples of inline elements are text, links, and images. This is important to remember, particularly if you start beating your head into the wall because you can't make headings appear smoothly in the middle of some text.

Position:Relative
An element will first be positioned according to it's normal flow, then offset "relative" to it's normal position. So if it was positioned top:5px and left:5px , it would be offset 5 pixels from the top and left of it's original position.

Relative positioning has no effect on other elements, meaning they will be positioned as if the relatively positioned element had not been offset.

Position:Absolute
An element will be positioned "absolutely" but "relative" to it's containing block.

Therefore, if it has no containing block (i.e.: it's container block is the page itself) then it will be positioned absolutely within the page. But if it has a container block (i.e.: is inside another element) then it will be positioned absolutely within that "parent" element.

So, let's say that the element has no containing block, and it was positioned top:5px and left:5px, it would move 5px to the right of the left side of the page, and 5px down from the top of the page.

But, if the element has a containing block, then with those same measurements it would move 5px down from the top of it's container and 5px to the right of the left side of the container. Although this sounds almost the same as relative positioning, it is not, and can be very useful property if used correctly.

Absolute positioning has no effect on elements occurring after it.

Floats
A float is what it sounds like: the element will float, either on the left or right on the current line. Content will flow around the floated element unless you tell it not to, by assigning it a clear property. Floats are removed form document flow, meaning that other elements will position themselves as if the floated element did not exist.

Clear has three values: left, right and both.

Floated elements must be given a width, unless the element contains something that has the width defined, like an image or textarea.

CSS Positioning : Tips on Positioning

Introduction and Overview
Position: Static, Relative, Absolute, and Float
Tips on Positioning
Bugs?
Further Reading & Conclusion

Tips on Positioning

I have found the best results with using floats and absolute with relative positioning, and "flexible" widths (%). An example of something I would do can be found in this article: Flexible Positioning with CSS.

I like to use "wrapper" divs to achieve as consistent layouts as possible. That's not a technical term, but a commonly used word to describe what it does -- it "wraps" around the element I want to position but does not contain any information in itself.

Example:

<div id="header">header</div>


<div id="main"> <!-- this is the "wrapper" -->
<div id="content">content</div>
<div id="navigation">nav menu</div>
</div>

<div id="footer>footer</div>

Then I decide which positioning method I want to use. Admittedly, there are bugs no matter which method you choose, however, many can be worked around.

CSS Positioning : Bugs?

Introduction and Overview
Position: Static, Relative, Absolute, and Float
Tips on Positioning
Bugs?
Further Reading & Conclusion

Bugs?

Using a float make your content get "cut off"? Assign it a height of "auto".

Want to position a footer at the very bottom of the page when there's less than a full page of content? Make sure it is the last element in your source and tell it to:

position:absolute; bottom:0; top:auto; left:auto;

Got a footer doing weird things when you've used floats? Tell it to clear:both.

If you've got problems occurring with positioning, check these two things, which are often a contributing factor:

1. Doctype. Have you got one? Have you got a correct one? You do need one. Get one. Now.
www.alistapart.com/stories/doctype

2. Box model. Are you doing it right? Got a large amount of visitors that use a browser that doesn't?
www.yourhtmlsource.com/stylesheets/cssspacing.html
www.tantek.com/CSS/Examples/boxmodelhack.html

CSS Positioning : Further Reading & Conclusion

Introduction and Overview
Position: Static, Relative, Absolute, and Float
Tips on Positioning
Bugs?
Further Reading & Conclusion