Wickham's XHTML & CSS tutorial
Div boxes - position absolute, relative and fixed
View in Firefox and IE6 to see the differences. In general IE7 and IE8 display like Firefox.
Some of the examples are provided just to show problems, others show solutions that work in Firefox, IE6, IE7, IE8, Opera and Safari. Use the example that suits you.
problems 
warning: works in some situations or needs care to display as you wish 
OK in Firefox, IE6, IE7 and IE8
The five properties
Within the three main positioning schemes described later there are five position properties: static, relative, absolute, fixed and inherit. For simplicity these three are used in the following examples: relative, absolute and fixed. Positioning can apply to any element; the examples that follow concentrate on use with div boxes which is probably the commonest use.
Position: static; is the default where, as it doesn't have any top, right, bottom or left positions, an element just follows in the order of the code and inline elements will be on the same line if there is room while block elements start a new line. It isn't usually necessary to state position: static; unless you want to cancel one of the other properties.
Divs with position: absolute;
1 The silver parent div box is position: relative; width: 730px; height: 200px; background-color: silver; so that it flows in the required position in the page text. The parent when position: relative forms the container from which the position: absolute divs take their positions. If the parent containing div did not exist the position: absolute divs would appear at the top of the screen, taking their positions from the main container or body of the whole page.
The code is:-
<div class="background" style="position: relative; width: 730px; height: 200px;">
<!--This is the containing div position: relative to flow in sequence with the rest of the page-->
<div style="position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure;">
position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure; overall width 248px including 2*3px padding and 2*1px border; (no height)
</div>
<div style="position: absolute; top: 10px; left: 5px; width: 240px; height: 150px; background-color: pink;">
position: absolute; top: 10px; left: 5px; width: 240px; height: 150px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border
</div>
<div style="position: absolute; top: 25px; left: 505px; width: 210px; height: 125px; background-color: yellow;">
position: absolute; top: 25px; left: 505px; width: 210px; height: 125px; background-color: yellow; overall width 218px including 2*3px padding and 2*1px border
</div>
</div> <!--end of containing div class="background"-->
A beginner is best advised to construct the whole page with position: absolute divs because they will all stay where they are put and each one can be repositioned without affecting the others. If the screen resolution is changed, all divs maintain their positions and scrolling may be required.
The order in which the codes appear in the html file is not significant as all divs take their positions from the body or a main container enclosing the whole content and do not follow the preceding code. In the example above the divs have been put in a parent container and must be within the container code, but in any order. The parent container is needed here because the text above may change position on the page if a viewer changes the text size, so the parent div is given position: relative to flow with the text.
The azure div is coded first but it makes no difference provided all three are coded within the parent container.
Position: absolute divs are usually positioned by coding top, left and width. Height is not essential if a div is to allow expansion down if larger text is chosen but other divs must be positioned to allow for this.
Position: absolute divs cannot be used in conjunction with text or images outside the divs because they are outside the normal flow and take no notice of any code outside them which means the text or image would have no knowledge of them and flow over or behind them.
These divs, if not in a position: relative element, are often used for logos at the side of a page where they will not conflict with anything else or they are used to contain everything on a page so that all divs have a permanent position and none can move according to the way the code reacts to the window resolution like moving to a row below at lower screen resolutions.
One option for a beginner would be to apply the principle used for my example to the whole page. Use a div with position: relative as a containing div for the whole page with margin: auto so that it centralises at high screen resolutions. Inside the containing div make all divs position: absolute so that positioning is easier for a beginner. The containing div will move sideways as it centralises at different resolutions but the position: absolute divs inside will stay in their allocated positions. Learn to use position: relative for more fluid designs as you gain experience.
<body>
<div style="position: relative; width: 730px; margin: auto;"> <!--This is the containing div position: relative; margin: auto; to centralise-->
<div style="position: absolute; top: 70px; left: 255px; width: 240px; background-color: azure;">
put all div content here
</div>
<div style="position: absolute; top: 10px; left: 5px; width: 240px; height: 150px; background-color: pink;">
put all div content here
</div>
<div style="position: absolute; top: 25px; left: 505px; width: 210px; height: 125px; background-color: yellow;">
put all div content here
</div>
</div> <!--end of containing div-->
</body>
It helps to use background-colors for divs temporarily to see the size and position of each div and remove the colors later.
Divs with position: relative;
2 Top and left positions have been omitted and float: left has been introduced. There is no need to use a parent container if the divs use position: static or position: relative because they will flow in the surrounding content.
If floated divs are used with relative positioning without stating top and left positions, each div is positioned relative to adjacent divs or text in the html file. An instruction to float will tell it to move relative to the normal relative position.
Without the instruction to float: left the div on the left would not have text flowing around it; all this text would start below the div.
The above example would float on the right within text if float: right was specified and the div was placed before the text in the html file.
If divs have no stated width or height or are given percentages, with different screen resolutions or text size some divs will increase in size and move the following divs so care has to be taken that page layout is not disrupted.
Text can also be floated relative to other text, eg slightly up or down, left or right.
It isn't usual to state top and left positions with position: relative; however, these positions are used to create layers, for instance to move text relative to its normal position over a preceding image.
3
This paragraph starts with <p style="clear: both"> to clear the float (left or right or both) so that it does not start in the available space next to the pink div above.
All divs with a float must be coded in the html file in the order in which they are to appear. The float: left tells the first div that it is ready to be part of a float sequence. Divs will normally start on the row below so whether or not the first div has float: left it will be on a new row. However, if you omit the float: left from the first div the next one, whether or not it has float: left, will also flip down and left (see the next example). All three need float: left to be in line and close to each other.
Divs with no float would always be shown on the row below unless there is room to be on the same line and also to follow a floated div.
It seems that whether a div floats next to a previous one is controlled by the previous div's float or lack of it in IE but Firefox behaves differently, See the next example.
Divs can be made flexible by using percentage sizes so that they always suit the screen resolution and scrolling is not required.
For more examples of floated divs see Two and Three column layouts
4 The azure div has no float: left but there is space next to the pink div and the pink div has a float: left so the azure div occupies the space next to the pink div in IE6 and IE7 but in Firefox and IE8 the azure div completely covers the pink div.
Note: if position: relative was omitted from the azure div it would still be below the pink div in Firefox but the pink div would show; see example 4 on Two and three column layouts.
However, the yellow div has a float: left but the azure div does not, so the yellow div flips down as normal and goes as far left as it can, which is against the bottom of the pink div in IE6 but to the far left in Firefox.
Divs with position: fixed;
5a Position:fixed is not supported by IE6 but is by IE7, IE8, Firefox, Opera and Safari.
In the above browsers this pink div displays at the top left of the screen where it has been positioned and stays in the same place while scrolling. The style is shown inside the div. However, IE6 does not support position: fixed and shows it in the position following this text where it has been coded and it will scroll.
A position: fixed div needs to be positioned with regard to the intended viewport size. A div with position: fixed; top: 700px will never show on a screen resolution of 800 x 600 and scrolling will not make it appear.
View this page in IE7, IE8, Firefox, Opera or Safari at different screen resolutions and see that the position: fixed pink div will appear in the same position on the screen but the main content will shift as it is centralised with margin:auto.
5b It is possible to fix the position of a div from the top of the window but allow it to centralise horizontally. This is useful if you want a menu bar at the top of the window but want it to centralise in different window resolutions. Two divs are required and two methods of coding are shown below. The html markup is the same for both but I have given each a different id to show both methods. Place the div at the very top of the page (not in a space like I have done) and give the divs a background-color so that the lower content doesn't show through when scrolling.
As in the previous item, the azure examples display at the top of the screen in modern browsers where they have been positioned and stay in the same place while scrolling vertically. IE6 does not support position: fixed in the same way and shows them in the position where they have been coded on the page and they will scroll.
Method 1 has a containing div position: fixed which is fixed vertically but also fixed to the left and right of the window. The inner div has a width and margin: auto to centralise within the window width of the position: fixed div:-
<div id="fixedtop">
<div id="center250">
Item 5b (1):- Div with position: fixed
</div>
</div>
The styles are:-
#fixedtop { position: fixed; top: 95px; left: 0; right: 0; border: none; z-index: 50; }
#center250 { width: 250px; margin: auto; background-color: #f0ffff; }
Method 2 has a containing div with a width and margin: auto to centralise. The inner div has position: fixed with the same width and fills the space of the containing div's width but will stay fixed vertically:-
<div id="center250a">
<div id="fixedtop2">
Item 5b (2):- Div with position: fixed
</div>
</div>
The styles are:-
#center250a { width: 250px; margin: auto; border: none; }
#fixedtop2 { position: fixed; width: 250px; top: 125px; background-color: #f0ffff; z-index: 50; }
I've put the actual code after the body tag because the div without position: fixed has a height which leaves a space in the page content if I place it anywhere else, but if you use this code for a menu at the top you can adjust the top margin of the following div to suit. The centralising of the two methods is slightly different because one is taking account of the page body margin while the other isn't.
Generally
See w3.org para 9.8 for detailed comparisons of normal flow (obtained with position: relative or no stated position) and position: absolute. You will get confused reading this so experiment with a simple example.
w3.org para 9.3 says:-
In CSS2, a box may be laid out according to three positioning schemes:
1. Normal flow. In CSS2, normal flow includes block formatting of block boxes, inline formatting of inline boxes, relative positioning of block or inline boxes, and positioning of compact and run-in boxes.
2. Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
3. Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.
Care needs to be taken with text in div boxes. Some of the divs above are not large enough for largest size text and the display is different in IE6 and Firefox but usually means that either the div expands down over lower text (IE6) or the text expands out of the div (Firefox and IE7).
Divs designed with percentage sizes can be given tenths of a percent but will result in 1px above or below the precise calculation. For instance, for a screen resolution of 800px wide giving about 780px net width, 25.1% is 195.78px which will result in either 195 or 196px depending on other content calculations.
Ideally divs would be designed with no height so that they are flexible in height if the viewer has set the browser to larger text. However, Firefox gives a div without a defined height a height of zero and this means that background colors or images are affected (see Firefox/IE6 background differences). It is best to give a div a fixed height in those circumstances.
See w3.org's Box Model here.
Remember that when a Doctype is included in the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths. Some older tutorials, including "CSS from the Ground Up" (see my Links page), state that Internet Explorer puts padding and borders inside the div box. This was the case with earlier versions of IE and is still the case with IE if no Doctype is used (but you should use one).
6 This shows how IE is the same as Firefox when a Doctype is used. The padding and borders are calculated outside the box. The image is 200px wide and the divs are width: 200px but the overall width is greater.
See Padding and borders without a Doctype to see the difference between IE and Firefox when a Doctype is not used.
If you want a div to form part of text, you cannot put a div in a p tag, the p tag must be replaced by a div.
The code for the above is:-
<div style="display: inline; border: none; height: 20px; padding: 0;">
First part of text in a div
</div>
<div style="display: inline; height: 20px; background-color: azure; padding: 0;">
text or contents of middle div
</div>
<div style="display inline; border: none; height: 20px; padding: 0;">
remainder of text in another div.
</div>
just creates a "hard" space, in other words makes sure a space is created in places where code sometimes does not provide a spacebar space.
If you want to obtain the appearance of a div by creating what looks like a colored box with text in it, an alternative to using three divs would be this:-
First part of text text or contents of middle part remainder of text.
The code for the above is:-
<p>First part of text <span style="background-color: azure; border: 1px solid black; height: 20px; padding: 0;">text or contents of middle part</span> remainder of text.</p>
It has the advantage that the text before and after the "box" is not contained in divs which could cause problems with the display at lower screen resolutions as they might flip down leaving space where text would normally continue on the same line.
Golden rules
Here are some golden rules, but with the complexity of positioning there are lots of exceptions:-
Position: absolute; if you put everything on a page in an element (such as a div) with position: absolute each one will have its place without ever disturbing any other.
Position: relative; it is often not necessary to state this but it must be stated if position: absolute divs are inside it and are required to take their position from it. A certain amount of trial and error is often needed to find the correct combination of position: relative stated or not stated and floats stated or not stated. Floats are essential to display block elements side by side.
Don't use bottom: 0; or any other number to fix divs to the screen bottom or related to it. If you do and then use a smaller screen resolution you will find that other content also wants to reach the bottom and will be obscured by the div fixed to the bottom. Scrolling will not make it appear.
It is unreliable in IE6 but position: fixed divs for a footer do work in IE7 and Firefox as shown in Footer tied to bottom of screen. Be careful if you do it.
Notes
View/Source or View/Page Source in browser menu to see all xhtml code.
The body of this page has margin: 20px. Most divs have border: 1px solid #black and padding: 3px coded in the stylesheet tutorial.css.
The examples above are in a containing div with width: 730px; and margin: auto; so that they centralise at large screen resolutions.
A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.
Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.
If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-
<!--[if IE 6]>
<style type="text/css"> div { margin-top: 30px; } </style>
<![endif]-->
or if there are many different styles, create a separate stylesheet:-
<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css"/>
<![endif]-->
ie6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).
When looking at a page source for this site you may see code like <p>Little Egret</p> instead of <p>Little Egret</p>. The code < is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing xhtml code tags which are to be activated.
© Wickham 2006 updated 2009