CSS Positioning

This tutorial teaches you how to use CSS to position images, text, and other elements on your Web pages. Essential reading for anyone who wants to start using CSS for layout.

In this tutorial we 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:

Sage

Oh the moon, the moon.

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:

This text is large and bold and uses small capitals.

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:

Value Example
length { top: 0px; }
percentage { left: 10%; }

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:

© ELATED 2006

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:

header image
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: 10px;
  background-color: #333366; color: #FFFFFF"}

#content { position: absolute; top: 65px; 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; }
Crosshairs
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 }
Crosshairs
This text is positioned 50 pixels right of where it would usually appear.

#mydiv { position: relative; top: 5px; }
Crosshairs
This text is positioned 5 pixels below where it would usually appear.

#mydiv { position: relative; bottom: 5px; right: 10px; }
Crosshairs
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>
© ELATED 2006


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: 50px; }
This container is 250px wide and 50px high. It has a background colour so that you can see the dimensions.

#mydiv1 { width: 75%; height: 50px; }
This container is 75% wide and 50px high. When using percentage units, the dimensions are calculated as a percentage of the parent element - in this case a <td>.

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: 50px; overflow: auto; }
mydiv1's overflow property is set to auto. A scrollbar will be displayed only if there is too much text to display. This example should show a scrollbar. Try it out - scroll down to see all the text.



#mydiv2 { position: absolute; left: 25%; width: 50%;
          height: 50px; overflow: hidden; }
mydiv2's overflow property is set to hidden. When there is too much text to display the content is clipped and the overflowing text is not displayed. Try to see the text at the bottom of this container!



#mydiv3 { position: absolute; left: 25%;
          width: 50%; height: 50px; overflow: visible; }
mydiv3's overflow property is set to visible. When these containers have too much text to display, it will be displayed anyway. This example text should overflow the area that has been allocated to it.



#mydiv4 { position: absolute; left: 25%;
          width: 50%; height: 50px; overflow: scroll; }
mydiv4's overflow property is set to scroll. The scrollbars are always visible, whether the content overflows or not!


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:

Value Example
auto { z-index: auto; }
integer { z-index: 2; }

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; }
I'm underneath!
I'm on top because I have a higher z-index

Follow Elated

Related articles

Responses to this article

20 most recent responses (oldest first):

24-May-10 02:47
@ayalsule: I admire your dedication! Most impressive.

Did it take a long time to code?
24-May-10 02:51
HHHHH
hi matt
I`m just kidding there is no comparison between css and stupid tables
26-May-10 05:13
@ayalsule You're right there.

BTW I like your slide-out Feedback tab on http://eleganza.biz/ - very swish...
26-May-10 10:25
Hi,
Cheers for tutorial, it was useful, thank you.

I am trying to position an image within a div tag - how do I do that? Iwas hoping to find that in the tutorial. Not sure if i missed it or perhaps it wasn't covered.

I assume that I've got to give the image an ID and then I can position it as normal with CSS.

Any ideas appreciated.

ad
31-May-10 01:13
@ad100789: Depends how you want to position the image exactly. What are you trying to achieve?
05-Jun-10 04:03
Great article that is helping this CSS newbie tremendously
I do have a question about "overflow," though. If I were wanting to do a 2-(or 3) column CSS layout with background colored containers for those columns - and they are different from the overall background color of the site - how would I extend all the colored columns down to the same length of the longest one? The longest one being the one with the most actual content in it. I hope this makes some sense to you
07-Jun-10 02:59
@DebG: Yes, perfect sense. What you're after are known as faux columns, and there are many ways to achieve them, usually with a background image (although I believe the newest CSS3 has a way to do them without needing images).

Try these tutorials:

http://www.alistapart.com/articles/fauxcolumns/
http://www.communitymx.com/content/article.cfm?cid=afc58

Hope that helps!
17-Jun-10 00:40
HI, Thanks for the Info, but I'm facing a problem and it's freaking me out; I have some thumb nails, all of them inside a DIV with relative position, well it doesn't matter if they are thumb nails or not, they are images, Well, the problem is that it all looks good on my screen but when I go to see on a different resolution, things get messed up, Either they appear to the left or down, I've tried things, I've tried even layers before but it's even worse.

What can I do to look well in any resolution?

Thanks
20-Jun-10 21:15
@aDistortedMind: If you post the URL of your page with the problem then we can take a look.

Cheers,
Matt
20-Jun-10 21:27
It's fixed, thanks anyway!
21-Jun-10 10:48
Hi guys,
I have positioned several paragraphs on top of each other inside a relative containing div using absolute pos with the idea that i will use dreamweaver's show/hide behavior to display the proper para depending on a thumbnail click. The paragraphs are of different lengths so I want the page flow to continue after the containing div, but since the absolutes are out of the page flow I can't seem to give the containing div a height that adjusts depending on which paragraph is being displayed. I guess I want something that is like "clear" is for floats. Any ideas.
Thanks as always,
John
25-Jun-10 04:14
Hi JohnnyA,

It sounds like you need to use regular (ie statically positioned) paragraphs, rather than absolutely positioned. The following content will then flow below the paragraph with no problems, and no need to specify heights.

You can show/hide the paras easily using JavaScript - here are some ways to do it:

http://www.dustindiaz.com/seven-togglers/

It's also very easy in jQuery:


$('#myPara').show();
$('#myPara').hide();


Does that help?
Matt
20-Oct-10 18:52
Im new to CSS, and what I am finding difficult is placing the menu around the top of the page.

Currently it is around 50-100 pixels down.

#header {
*position
width: 1000px;
height: 40px;
margin: 0 auto;
background: url(images/menu.jpg) no-repeat left top;

I know CSS is simple for some but, I am battling to work the code and make it do what I want it to.

Any help would be greatly appreciated.
20-Oct-10 21:19
Hi TruthConquers,

Bit hard to answer without seeing the actual page. Can you post its URL?

Cheers,
Matt
21-Oct-10 05:10
Good day Matt thanks for the quick reply.

http://www.freecsstemplates.org/preview/abundant/

I am messing around with this free template to get the gist of CSS.

Thanks for the thanks.
21-Oct-10 21:32
Hi TruthConquers,

Have you tried taking the padding-top out of the #menu ul?


#menu ul {
margin: 0;
padding-top: 125px;
list-style: none;
line-height: normal;
}


If you have any more questions, please post in a new topic:

http://www.elated.com/forums/authoring-and-programming/topic/new/

Thanks!
Matt
22-Oct-10 09:02
Thanks again, I have created another topic.

Cheers.
06-Dec-10 21:00
Hello, I was referred to your site regarding css absolute positioning being unnecessary. Personally, I'm still learning css and still don't quite understand the difference between relative and absolute positioning.

I have a webpage inside 1 big container. The header, navigation and content sections, each have their own div tags. Inside the content area I have 4 images with 4 short lists that are suppose to be paired. 2 pairs are placed on one line and the other 2 pairs are placed on a second line.

My content area doesn't clear the images/lists pairings. I was told that the absolute positioning I used to place the images/lists pairings was unnecessary and that basically any kind of positioning is unnecessary. What I would like is your opinion. Thanks in advance.

These are the links to my site and the css code.
http://creative-helpful-hands.webs.com/index.html
http://creative-helpful-hands.webs.com/style.css
06-Dec-10 22:02
@ikaika: You can do multi-column pages using CSS floats (e.g. float: left and float: right). No need to use CSS positioning.

If you have any more questions on your layout, please post in a new topic:

http://www.elated.com/forums/authoring-and-programming/topic/new/

Thanks!
Matt
29-Apr-11 15:11
Matt I just want to say thanks. I have been searching online for about a week, trying different codes that didn't work. I have been trying to add a menu to a theme that does not have a menu in the header. I even paid someone to do it and he couldn't accomplish the task. I finally tried this code that you supplied;


<div id="menu">


In between the tags I added my pages and then I realized that they were not links so then I added a link tag and now I have a menu on my header. Now trying to change the font size. You made my day. Thanks again.

View all 27 responses »

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page