There are several box types in CSS, but you will rarely, if ever, use anything but inline or block. Inline boxes created by inline-level elements such as a strong element are boxes that allow adjacent elements to flow around them. They do bump other boxes out the way like a bully. They sit happily in the flow of a sentence or the flow of adjacent elements.

On the other hand, block boxes created by block-level elements such as a div do not allow adjacent elements to flow around them. They like to exist in their own space and push adjacent boxes above and below themselves. Two block level elements cannot co-exist in the same horizontal space unless under very specific circumstances known as floating which we will cover in a moment.

The differences between absolute and relative positioning and their specific uses might be a little confusing.

The most common use of relative positioning is to allow an child elements to be absolutely positioned relative to its parent.

Essentially, relative posistioning is a rare thing and is mainly used as a starting point for positioning another element in relation to it.

In this example, the child element has been positioned relative to its parent, but notice how it is relative to the document flow, and NOT relative to the parent's border (in this case, the top-left corner).

In this example, the child element has been absolutely positioned, but notice how it is relative to the viewport and NOT relative to the parent at all.

We know it is now absoutely positioned, because it has been removed from the document flow. Notice how the child element now overlaps the parent element as opposed to appearing 'within' it.

And, because the parent element lacks a position property, the absolutely positioned element is positioned relative to its nearest positioned ancestor. In this case, it goes all the way to the top - the viewport.

In this example, the child element is now absolutely positioned relative to the parent element.

We have given the parent element a position property of relative so that it remains in the document flow as well as gives the child element a reference point for its position.

Absolutely positioned elements are positioned relative to their nearest positioned ancestor.

Using the CSS float property is very powerful tool, indeed. But its use is not without the possibility of major headaches. The Floatutorial in the Further Reading section attacks this beast head-on to give you all you need to know about the power of using floats.

Using the CSS float property is very powerful tool, indeed. But its use is not without the possibility of major headaches. The Floatutorial in the Further Reading section attacks this beast head-on to give you all you need to know about the power of using floats.

Using the CSS float property is very powerful tool, indeed. But its use is not without the possibility of major headaches. The Floatutorial in the Further Reading section attacks this beast head-on to give you all you need to know about the power of using floats.

Using the CSS float property is very powerful tool, indeed. But its use is not without the possibility of major headaches. The Floatutorial in the Further Reading section attacks this beast head-on to give you all you need to know about the power of using floats.

Each of these sites contain massive amounts of information. These specific links are meant to reinforce some of the topics discussed in this presentation, educate you further on related topics, or give you a first hand look at these topics in action. You may browse each site further if you'd like.

You should bookmark any sites throughout the presentation that are labeled as such, and start to create a collection of 'Web Standards' bookmarks. You will need these resources handy soon, and you'll be using them a lot.

Each of these sites contain massive amounts of information. These specific links are meant to reinforce some of the topics discussed in this presentation, educate you further on related topics, or give you a first hand look at these topics in action. You may browse each site further if you'd like.

You should bookmark any sites throughout the presentation that are labeled as such, and start to create a collection of 'Web Standards' bookmarks. You will need these resources handy soon, and you'll be using them a lot.

Each of these sites contain massive amounts of information. These specific links are meant to reinforce some of the topics discussed in this presentation, educate you further on related topics, or give you a first hand look at these topics in action. You may browse each site further if you'd like.

You should bookmark any sites throughout the presentation that are labeled as such, and start to create a collection of 'Web Standards' bookmarks. You will need these resources handy soon, and you'll be using them a lot.

Each of these sites contain massive amounts of information. These specific links are meant to reinforce some of the topics discussed in this presentation, educate you further on related topics, or give you a first hand look at these topics in action. You may browse each site further if you'd like.

You should bookmark any sites throughout the presentation that are labeled as such, and start to create a collection of 'Web Standards' bookmarks. You will need these resources handy soon, and you'll be using them a lot.