In this tutorial I’ll show you how to position images, text, and other elements on your page using CSS.

If you’ve been building Web pages for some time, it’s likely that you use HTML tables for laying out your pages. This used to be the only way to control the position of elements on the page. However, CSS2 (CSS level 2, the latest version of CSS at the time of writing) provides new ways to control positioning. CSS gives you control down to the pixel level, and it can also do some things which were harder or impossible to do with tables.

For example, the coloured blocks below are all positioned using CSS:

Try doing that using tables! 😉

Accessibility

One of the great advantages of using CSS for layout is that it is fully standards compliant. This means that your site will be much more accessible for people using alternative browsing methods such as handheld devices, braille browsers, or text only browsers.

These users will appreciate being able to get at the content of your Web pages without having to wade through layers of presentation tables, and in fact will have a similar view to those using older browsers that don’t support CSS2. Users with older browsers will still be able to read your pages, but will not see all the fancy formatting you’ve applied.

Because of this, it’s a good idea to place the items that you want to appear at the top of the page at the top of the HTML code, and so on through to the bottom of the page. This way, older browsers will display your page content in the correct order.

Older browsers

The techniques used in this tutorial will work in Internet Explorer 5+ and Netscape 6+ (around 93% of Web users according to recent statistics).

Internet Explorer 4 and Netscape 4 provide partial support for CSS2. Some techniques will display correctly in these browsers while others will not. For example, Netscape 4 fails to display the background-color of a div tag.

Now let’s take a look at how to position stuff with CSS!

Containers

The block example near the top of this tutorial uses three containers which are positioned using CSS. Containers can contain other HTML elements such as images, text, tables, and so on. In the example above, two of the containers hold text, while the other one is empty. Generally we use the HTML tag <div> to specify containers, and we use ids to refer to each container within our stylesheet.

Example:

<div id="mydiv">
This text is large and bold and uses small capitals.
</div>

We can then apply styles to our container by using the # selector in our style sheet:

#mydiv {font-variant: small-caps;
  font-size: 1.5em; font-weight: bold; }

to produce something like this:

Positioning

The position property is used to determine what kind of positioning we want to use for the container. The most useful values are:

position: absolute;

Positions an element at an arbitrary location in the page

position: relative;

Positions an element relative to its usual position in the page

Absolute positioning is the easiest to understand, so we’ll start with that!

Absolute positioning

Absolute positioning allows us to remove a container from the context of the other elements around it and position it wherever we want on the page. We tell the browser exactly where we want the container to appear using the top, left, right, and/or bottom properties.

The top property defines how far from the top of the page we want the top of our container to appear. If we use a positive value, then our container is moved down from the top of the page, whereas a negative value would move our container up from the top of the page.

The left property defines how far from the left edge of the page we want the left edge of our container to appear.

The right property defines how far from the right edge of the page we want the right edge of our container to appear.

The bottom property defines how far from the bottom edge of the page we want the bottom edge of our container to appear.

In all cases, if we don’t want to offset the container in a particular direction, we can just leave the property out of our style sheet.

The allowed values for top, left, right, and bottom are:

length values are specified using the CSS length units such as px, em, and cm. For a full description of these, see the CSS units reference.

percentage values are relative to the parent element’s dimensions. In our next two examples this would be the entire Web page.

Examples

Our first example uses the bottom and right properties to absolutely position a copyright notice on a Web page, as shown below:

To do this, we define a container called copy to hold our copyright notice:

<div id="copy">

&copy; ELATED 2006
<div>

We then position it in the bottom-right corner using CSS:

#copy { position: absolute; right: 10px; bottom: 10px; }

(Remember that we use the # in a style sheet to refer to an element which has been given an id.)

For our second example, imagine that you want to build a page that looks like the one below:

home | diary | photo gallery | contact

Welcome

to my site…

You would split the page into three containers – header, menu, and content:

<div id="header">
<img src="header_image.jpg"
width="100%" height="50" alt="header image">
</div>

<div id="menu">
home | diary | photo gallery | contact
</div>

<div id="content">

<h1>Welcome</h1>
<p>to my site...</p>
</div>

The style sheet would position them one underneath the other using CSS like this:

#header { position: absolute; top: 0px; left: 0px;
  width: 100%; }

#menu { position: absolute; top: 50px; left: 0px;
  width: 100%; height: 38px;
  background-color: #333366; color: #FFFFFF"}

#content { position: absolute; top: 88px; left: 0px;
  width: 100%; background-color: #FFFFFF; 
  color: #000000"}

Relative positioning

With relative positioning the container is positioned relative to its usual position on the page.

As with the absolutely positioned containers, we can use the left, right, top and bottom properties to modify the position. However, these modifiers work in a slightly different way with relative positioning. The main things to remember are:

• We always measure from its usual position on the page. (Absolute positioning measures from the top-left of the page.)
• We always offset the top-left of the container. (Absolute positioning offsets different edges depending on which property you’re using to offset the container.)

The top property defines how far from the top of its usual position we want the top of our container to appear. If we use a positive value, then our container is moved down from the usual position, whereas a negative value would move our container up from the usual position.

The left property defines how far from its usual position we want the left of our container to appear. Positive values will move the container right, and negative values will move it left.

The right property defines how far from its usual position we want the left hand edge of our container to appear (not the right hand edge, as you might expect!). Setting right: -5px is the same as setting left: 5px with relative positioning.

Similarly, the bottom property defines how far from the usual position we want the top of the container to appear. Setting bottom: 50px is the same as setting top: -50px when using relative positioning.

The examples below use cross-hairs to show what would be the normal position of the container on the page. This is the point that the left, right, top and bottom properties are measured from. We’ve also given the containers a background colour, so that you can see more easily how they’re offset from their top-left corner.

Examples

#mydiv { position: relative; top: 0px; left: 0px; }

This text is positioned where it would usually appear on the page. Notice that the top-left corner is at the centre of the cross-hairs.

#mydiv { position: relative; top: 0px; left: 50px }

This text is positioned 50 pixels right of where it would usually appear.

#mydiv { position: relative; top: 5px; }

This text is positioned 5 pixels below where it would usually appear.

#mydiv { position: relative; bottom: 5px; right: 10px; }

This text is positioned 5 pixels above and 10 pixels to the left of where it would usually appear. (Remember that we’re offsetting the top-left corner of our container.)

Absolute isn’t always absolute!

When explaining absolute positioning above, we assumed the containers are being positioned absolutely within the entire Web page. In fact, absolute positioning is a little more complex, and containers can actually be positioned absolutely within another container that has been positioned on the page.

Our absolutely positioned examples above actually make use of this advanced positioning concept, in order to show you the examples inline, instead of using a new HTML page for each example. To do this, we absolutely positioned our example containers within relatively positioned containers. This has the effect we want because:

1. The relatively positioned element will appear at the appropriate position in the document (i.e. within the document flow).
2. With absolute positioning the browser doesn’t reserve space within the document flow for the container. This means that if you wanted to mix absolutely positioned items with some normal text on the page, one would overlap and obscure the other – not much use for our examples!>
3. On the other hand, relatively positioned containers work much more like the HTML elements you’re used to, in that they do take up space within the document flow.

In the example below, the relatively positioned element appears within the document flow as well as taking up the space needed to display it, so we end up with absolutely positioned elements shown inline.

#container {position: relative; width: 100%; height: 125px;}
#copy {position: absolute; right: 10px; bottom: 10px;}

<div id="container">

  <div id="copy">
    &copy; ELATED 2006
  <div>
<div>

Controlling the size of a container

You should now know how to position your containers on the page. Now we’ll explain how you can control the size of your containers.

The width and height propertes are used to determine how large a container is. These are specified using the CSS length units such as px, em, and %. For a full description of these, see the CSS units reference.

Examples:

#mydiv1 { width: 250px; height: 200px; }

#mydiv1 { width: 75%; height: 200px; }

Additionally, the overflow property can be used to determine what happens when the container is filled to over-flowing. The allowed values are:

overflow: auto;

Automatically displays scrollbars if the content overflows the container

overflow: hidden;

Clips the element and hide any content which overflows the container

overflow: visible;

Displays all content, including any that overflows the container

overflow: scroll;

Always displays scrollbars within the container

Examples:

#mydiv1 { position: absolute; left: 25%; width: 50%;
          height: 200px; overflow: auto; }

#mydiv2 { position: absolute; left: 25%; width: 50%;
          height: 180px; overflow: hidden; }

#mydiv3 { position: absolute; left: 25%;
          width: 50%; height: 200px; overflow: visible; }

#mydiv4 { position: absolute; left: 25%;
          width: 50%; height: 200px; overflow: scroll; }

Layering up

When displaying containers that overlap, you might sometimes want to specify which container lies on top of another. The property z-index allows us to do this. The allowed values are:

auto will use the same stacking level as the parent element.

integer defines the stacking level of the element. An element with a higher stacking level will be displayed on top of one with a lower stacking level. Negative integers may also be specified.

Examples:

#mydiv1 { z-index: 1; }
#mydiv2 { z-index: 2; }