In this tutorial, I review positioning page elements with Cascading Style Sheets (CSS). I cover the use of margins and the positional properties of absolute, relative, and static positioning. The aim of this tutorial is to avoid getting overly complex or complicated. I cover just enough so that you can understand these positioning options. I hope this tutorial gives you the boost you may be looking for to experiment with and to discover more about positioning elements with CSS for yourself.

Remember that all the CSS in this tutorial is shown without the style tags and you should place it in the head of your page—just above the closing </head> tag is an ideal place. In a production page, place your CSS in an external style sheet.

<style type="text/css">

<!-- 
Your CSS sits in here
--> 
</style>

Article Series

This article is part 1 of a 4 part series. Other articles in this series are shown below:

1. Introduction to CSS Positioning in Dreamweaver MX 2004
2. Introduction to CSS Positioning in Dreamweaver MX 2004 - The Absolutely-Positioned Div
3. Introduction to CSS Positioning in Dreamweaver MX 2004 - Relative Positioning
4. Introduction to CSS Positioning in Dreamweaver MX 2004 - Static Positioning