Page 1 of 3 In this, the sixth tutorial in the beginning CSS series, we are going to look at positioning our page elements with CSS. We will investigate the use of margins, and the positional properties of absolute, relative, and static. The aim of this tutorial is not to get overly complex or complicated; we just want to get these options buttoned down and understood. Hopefully this tutorial will give you the boost you may be looking for to experiment, and to discover more about positioning elements with CSS for yourself.
The first five tutorials in this series can be found at the links below:
If you're a Dreamweaver user and have not really investigated using positional CSS, then you are most likely familiar with AP—Absolutely Positioned—divs, or "layers" in Dreamweaver speak. The term layers is incorrect; these are in fact divs, or divisions. We will start in the correct manner by calling these elements by their correct name—albeit abbreviated—and refer to them as divs. We will not be using the Dreamweaver "Draw Layer" tool in this tutorial, we will be coding our CSS by hand. With that said, let's make a start by taking a look AP divs, and how they interact with other elements on our page.
Remember all the CSS in this tutorial series is shown without
the style tags and should be placed in the head of your page. Just above the
closing </head> tag would be ideal for our purposes. In a "production" page
you should be placing your CSS in an external style sheet.
<style type="text/css">
<!--
Our CSS sits in here
-->
</style>
An absolutely positioned div lives up to its name. It is positioned to a fixed point within its container, and it cannot move from this position. When you draw a div with Dreamweaver's Draw Layer tool, this is the type of div you are adding to your page. An AP div is positioned on a page wherever the top and left declarations tell it to be. You can also use the bottom and right properties to position an element, although this may prove to be buggy and is not something I would recommend.
An AP div is said to be removed from the normal document flow. This means the position of an AP div is not affected by any other page elements. Though it may cover up or be covered by other elements, it is very much an entity to itself. Let's take a look at Listing 1. Add the CSS we see there into a new page, and save the page with a name of your choice.
#blue {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background-color: blue;
}
Listing 1: Defining an Absolutely Positioned div
Let's take a look at the above code line by line.
I have given our div a height value. It is often a good idea to not declare a height for your div so it can expand and contract to suit the content it may hold. Content could fluctuate due to text resizing by the end user, or you may be using your div for dynamic data that varies from record to record. These are two examples of instances where a height declaration may be a problem.
To insert our div into our page, we use the syntax shown below. We have no need to add any content to the div for this tutorial. We are simply going to insert the div into our page, and see how it reacts to the different values we are going to place on the position property. Add the code from Listing 2 between the body tags in your page, and preview it in your browser of choice.
<div id="blue"></div>
Listing 2: Adding the div into our page
Image 1: Our AP div
If you look at Image 1, you can see that our div has taken on the form we declared in our CSS. The div, as you know, is absolutely positioned. We mentioned earlier that an absolutely positioned div is placed out of the document flow. This means that it remains unaffected by other elements on our page. We'll look at this now by adding an <h1> element to our page. Once we have done that, we will be able to see how the two elements—our div and and our h1— interact with each other.
Alter the code in your page to look like Listing 3. As you can see, I have added an <h1> to the code. There is no need to style it for this demonstration.
<h1>This is an h1 title</h1>
<div id="blue"></div>
Listing 3: Adding the h1 element
Previewing the page should give you the results you see in Image 2.
Image 2: Our blue AP div and the h1 element
As you can see, our AP div has not had any bearing on our h1 element. The h1 element is occupying the position we would expect, and the div has also correctly assumed its position.
Try changing the order of the two elements in the code so that the h1 element appears below the div. Preview the page again once you have made the changes. You will see that the position of the elements in the code has no effect on the way the browser displays them. This is simply the nature of the behaviour of an absolutely positioned div. Once the positioning value has been declared as absolute, it is removed from the flow of the page. An absolutely positioned div will remain in the position it is placed—in accordance with its top and left property values—within its containing element. You can think of an AP div as being on a higher plane than page level. They act as if they are stacked above the page.
Keywords
box, div, positioning, relative, absolute, static, container, body border, background, color, colour
