18 replies [Last post]
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 weeks 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

It seems like a large percentage of the problems that CSS newbies have is with trying to use absolute positioning to create their layouts.
Often the cry goes up: "don't use absolute positioning" and then the requisite explanation of why it can be a bad thing.
So I thought it might be a good thing to have something to refer to that might illustrate and explain why people should be wary of using absolute positioning. So here goes:

Absolute positioning can be used to put together a layout quite quickly: by using values for top, right, bottom and left you can get everything exactly where you want it.
The catch is that your layout will look great on your screen, at your window size and the text size you've chosen (not to mention OS), but as soon as someone else views your layout with any of those variables different from yours, things start to go wrong.
To illustrate, here's a little example I put together:

Every element on the page is positioned using position: absolute. Widths & heights are all in percentages to create a fluid layout while values for top, right etc. are all in pixels to get things exactly where I want them. The screenshot was taken at a screen res of 1024 x 780.
So far, so good. Now let's take a look at the same layout viewed at 800 x 600.

Or even just by pressing F11 in Firefox to get full-screen view (and thus a bigger window area):

As you can see, things are moving around and overlapping where they shouldn't.

This is because absolutely positioned (AP) elements are taken out of the normal flow of the document and have no impact on later siblings (elements that appear after them in the source but within the same container).

Which means that AP elements have no awareness of what's happening around them. When a page changes size, the elements don't move in relation to each other but rather in relation to their container and the values you've set for top, left etc.

And in most cases where newbies use AP to place layout elements, the container in which these elements are placed is the body itself, so when the body resizes, you get the above problems.

So, OK, if that's the case, what do you do instead and why would you use AP at all?

To answer the first: it's going to vary on a case by case basis, and this is more of a heads-up as to potential problems rather than an answer to specific layout questions.

But, in general, when creating a layout, you should try and work as much with the normal flow of the document as possible. Let the elements themselves help position those that come after them.

In some cases though, you will want to use floats. Floats are also taken out of the normal flow of the document but content will flow around the outside of a float, which is not the case with AP elements. Floats can also be cleared to have content appear below the area of the float. These two factors make floats a bit more flexible as a layout device than AP.

So, when do you use AP?

One case would be when you want something to remain the exact same distance from something else no matter how the text or window is resized.

Another example comes from wellstyled.com and is used for more accessible image replacement.

In most of these cases, however, the containing block is set to position: relative to establish a new positioning context of any descendant element that is then positioned absolutely relative to the containing block.

So, the moral of the story is: AP can be a useful tool, but until you have a better understanding of the Visual Formatting Model, it is something that should be approached with caution.

All comments or additions to the above are welcomed.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

lazzerous
Offline
newbie
Last seen: 9 years 19 weeks ago
Joined: 2005-07-15
Posts: 3
Points: 0

Absolute positioning pitfalls

With a footer element, how to you always get bottom placement if the height of the elements above it is dynamic, meaning dependent on the content loaded in that page?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 5 days ago
Timezone: GMT-5
Joined: 2004-06-30
Posts: 9668
Points: 801

Absolute positioning pitfalls

You don't, not without a lot of hacks and unneeded effort.

Search this forum for "footer" to see what I mean.

Great post Tyssen, you and Treva are valuable assets to CSSC Laughing out loud

/stickified

Verschwindende wrote:
  • CSS doesn't make pies

Fonz_k
Offline
Regular
Netherlands
Last seen: 5 years 21 weeks ago
Netherlands
Joined: 2005-10-22
Posts: 34
Points: 0

Absolute positioning pitfalls

You did a great job explaining AP!

Now I know what went wrong with my design....

As a newbie it's not easy to get a grip on css, but as long as there are guys like the GURU's in the forums (and of course all the other helpers.....) the long way of understanding CSS is a lot shorter...

I have been working on getting rid of the AP on my site.........

http://www.csscreator.com/css-forum/ftopic13508.html

Resurrection is for those who did not get it right the first time

NellieW
NellieW's picture
Offline
newbie
Florida, USA
Last seen: 8 years 50 weeks ago
Florida, USA
Joined: 2005-12-05
Posts: 9
Points: 0

Well done example of AP.

Great job!

Does this mean that...

#footer {position:absolute;bottom:0px;left:0px;width:100%}

will be displayed poorly in various window settings?

NellieW

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 weeks 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Absolute positioning pitfalls

If you want a footer that's always at the bottom of the screen, you'd be better off looking at something like this. There have also been other methods discussed on this forum. You should be able to find the threads with a search.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

NellieW
NellieW's picture
Offline
newbie
Florida, USA
Last seen: 8 years 50 weeks ago
Florida, USA
Joined: 2005-12-05
Posts: 9
Points: 0

No wonder it has been so easy.

I understand now how important it is to view my work in older browsers and to also change the window size.

Thanks a lot for showing me just how pitiful my testing has been.

There went any chance of me having a love life.

NellieW

mike lane
mike lane's picture
Offline
Regular
Tacoma, WA
Last seen: 8 years 50 weeks ago
Tacoma, WA
Timezone: GMT-8
Joined: 2005-12-06
Posts: 50
Points: 0

Absolute positioning pitfalls

I'm going to have to disagree with you about the merits of absolute positioning. First off, let me say that I can absolutely see how people can get tripped up by absolute positioning and that the examples that you give are absolutely correct. I simply think that you are missing some of the benefits of absolute positioning.

Take a look at photoscapedesign.smugmug.com (a site that I designed). Notice how the element is centered both vertially and horizontally on the screen? Now resize your browser. Notice how the element stays centered both vertially and horizontally irrespective of the viewport dimensions (you may have to reload Opera 8.x and below to get it to re-center vertically)? Dare I say that this is something (the vertical centering specifically) that absolutely cannot be done with relative positioning.

But position:absolute is worth far more than this kind of trickery. Notice that every element on that page is positioned absolutely. All the thumbnails and the larger image to the right are absolutely positioned. Yet they move in unison as the screen is resized. Douglass Bowman has a great article explaining why this is.

More info at the CSS2 specification.

So I agree that absolute positioning is most certainly not a cure all (and by the sounds of it, it may be a bit of a headache around here) there are plenty of instances when position:absolute; is the easiest tool or even the only tool for a page's design.

http//photos.mikelanestudios.com/
http//blog.mikelanestudios.com/

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 weeks 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: Absolute positioning pitfalls

Tyssen wrote:
So, the moral of the story is: AP can be a useful tool, but until you have a better understanding of the Visual Formatting Model, it is something that should be approached with caution.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Anonymous
Anonymous's picture
Guru

Re: Absolute positioning pitfalls

Tyssen wrote:
Tyssen wrote:
So, the moral of the story is: AP can be a useful tool, but until you have a better understanding of the Visual Formatting Model, it is something that should be approached with caution.
Yes. We are not against using absolute positioning, just the amateurish use of it to position blocks of text that become half hidden after a single text size increase. Smile

mike lane
mike lane's picture
Offline
Regular
Tacoma, WA
Last seen: 8 years 50 weeks ago
Tacoma, WA
Timezone: GMT-8
Joined: 2005-12-06
Posts: 50
Points: 0

Re: Absolute positioning pitfalls

Triumph wrote:
Tyssen wrote:
Tyssen wrote:
So, the moral of the story is: AP can be a useful tool, but until you have a better understanding of the Visual Formatting Model, it is something that should be approached with caution.
Yes. We are not against using absolute positioning, just the amateurish use of it to position blocks of text that become half hidden after a single text size increase. Smile

I'm right there with you! Like I said in the other thread, I'm just trying to help people understand where they can use it Smile

http//photos.mikelanestudios.com/
http//blog.mikelanestudios.com/

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 16 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9257
Points: 3263

Absolute positioning pitfalls

Hi Mike,

Welcome to the forum.

Generally, most of us try to steer the less than expert away from AP as a major layout device. I agree that AP is a powerful property, but folks learning css have quite enough on their plates without dealing with the myriad gotchas that absolute positioning brings to the table.

Using AP in sub-units with pretty much fixed dimensions and set content, as Bowman described is often a good plan. Using AP when dimensions and content are flexible will bite the intermediate and newer coder on the butt more often than not.

Your own design (Photoscape) is fragile at heart. You made the splash page small enough that there likely will be no problem, but any browser viewport narrower than the centered AP container will cut off and make unscrollable a portion of the content. Likewise, if squeezed vertically. "I took that into consideration," you say. Someone less skilled, though, will get bit.

Within the box, using AP placement of each element works. Would it hold up if the container were elastic in size? I would have used floats, myself, and no AP elements. I wouldn't have used mystery meat links either, but that's a different issue.

No way to center in the viewport with css sans AP? Why yes, there is. For simplicity's sake I would suggest using a single celled table. But you want a css solution. It's simple with most browsers. The Moz/Gecko family, Opera and the khtml family all support css2. IE is the rub. Christmas eve will be the seventh anniversary of the adoption of css2 (24 Dec., 1998), and IE's gone through two major revisions since then without including support. So you have to jump through a hoop or three. But, it is doable. Again, with IE's lack of support I would advise a one-celled table, but here is a css way;

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xml:lang="en" 
      xmlns="http://www.w3.org/1999/xhtml" 
      lang="en"> 
<head> 
  <meta name="generator" 
        content= 
        "HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" /> 
         
  <meta name="editor" 
        content="Emacs 21" /> 
  <meta name="author" 
        content="Gary Turner" /> 
  <meta http-equiv="content-type" 
        content="text/html; charset=utf-8" /> 
 
  <title>v+h centering</title> 
<style type="text/css"> 
/*<![CDATA[*/ 
 
html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    } 
 
#container { 
    border: 1px solid black; /*for clarity*/ 
    display: table; 
    height: 50%; 
    width: 90%; 
    margin: 25px auto; 
    padding: 5px; /*for clarity*/ 
    } 
 
#content { 
    border: 1px solid black; /*for clarity*/ 
    display: table-cell; 
    vertical-align: middle; 
    position: relative; 
    width: 100%; /*IE needs hasLayout*/ 
    } 
 
#inner { 
    border: 1px solid black; /*for clarity*/ 
    width: 50%; 
    margin: 0 auto; 
    } 
 
/* \*/ 
* html #content { 
    top: 50%; 
    left: 0; 
    } 
 
* html #content #inner { 
    position: relative; 
    top: -50%; 
    } 
/* */ 
 
/*]]>*/ 
</style> 
</head> 
 
<body> 
  <div id="container"> 
    <div id="content"> 
      <div id="inner"> 
        <p>v+h centered stuff</p> 
        <p>v+h centered stuff</p> 
      </div><!-- end inner --> 
    </div><!-- end content" --> 
  </div> 
</body> 
</html>

cheers,

gary

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.

KirstyB
KirstyB's picture
Offline
Regular
United Kingdom
Last seen: 7 years 31 weeks ago
United Kingdom
Joined: 2006-01-13
Posts: 24
Points: 0

Newbie Query

Ok,
I'm a complete newbie at CSS and have just encountered the exact problem you described with my website. It looks exactly as I want on my 15" monitor displaying 1024 x 768 pixels but when I uploaded it for testing looks wrong on other computers.

This is my website
http://www.bandm.co.uk/Index.asp

I'm a bit confused though about how to correct it. Its only the three centre boxes that appear wrong. The header and the columns on each side appear where I want them on everyones monitor (although if you resize the screen the column on the right overlaps the centre info)

Is this where float would be best?

My CSS file is this:

/* CSS Document */

body {
color:#333;
background-color:white;
margin:20px;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
}
span {color:#FFFFFF;}

h1 {
margin:0px 0px 15px 0px;
padding:0px;
color:#FFFFFF;
font-size:28px;
font-weight:900;
}

h2 {
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}

h3 {
margin:0px 0px 15px 0px;
padding:0px;
color:#999999;
font-size:28px;
font-weight:28px;
}

h4 {
font:bold 10px/12px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}

p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}

p.footnotes {
font:9px/18px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
.body>p {margin:0px;}
.body>p+p {text-indent:30px;}
.Content>p {margin:0px;}
.Content>p+p {text-indent:30px;}

a.BodyLinks {
color:#000099;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a.BodyLinks:link {color:#000099;}
a.BodyLinks:visited {color:#000099;}
a.BodyLinks:hover {color:#FF9900;}

a.HeaderLinks {
color:#FFFFFF;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a.HeaderLinks:link {color:#FFFFFF;}
a.HeaderLinks:visited {color:#FFFFFF;}
a.HeaderLinks:hover {color:#FF9900;}


.body {
position:absolute;
width:1500px;
top:-2px;
Left:-1px;
height:40px;
background-color:#000099;
padding:10px;
z-index:4;
}

.toprow {
position:absolute;
width:55%;
left:20%;
min-width:50%;
height:20%;
top:115px;
border:1px solid black;
background-color:white;
padding:10px;
}

.middlerow {
position:absolute;
top:70%;
left:20%;
width:55%;
min-width:50%;
height:80%;
min-height:40%;
border:1px solid black;
background-color:white;
padding:10px;
}
img.relative {position:relative; height:200px; width:200px;}
.bottomrow {
position:absolute;
top:131%;
left:20%;
width:55%;
min-width:50%;
height:10%;
border:1px solid black;
background-color:white;
padding:10px;
z-index:4;
}

#navAlpha {
position:absolute;
width:130px;
top:0px;
left:-3px;
padding-top:120px;
padding-left:10px;
background-color:#EBE9E9;
z-index:2;

voice-family: "\"}\"";
voice-family:inherit;
width:128px;
}

body>#navAlpha {width:128px;}

.awardcolumn {
position:absolute;
width:130px;
top:470px;
left:0px;
padding:10px;
z-index:2;
}


#navBeta {
position:absolute;
width:130px;
top:0px;
right:0px;
padding-top:120px;
padding-left:10px;
background-color:#EBE9E9;
z-index:3;

voice-family: "\"}\"";
voice-family:inherit;
width:168px;
}

body>#navBeta {width:168px;}

.spotlight {
position:absolute;
width:160px;
Height:auto;
top:278px;
right:0px;
background-color:#EBE9E9;
padding:10px;
z-index:4;
}

Thanks

Kirsty

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 weeks 4 hours ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Absolute positioning pitfalls

Hi Kristy, please start another thread about your problem.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

edshaw
Offline
newbie
Last seen: 8 years 45 weeks ago
Joined: 2006-01-14
Posts: 1
Points: 0

Visual Formatting Model

All due respect, Tyssen, but I have hundreds of pages
of material on my desk, waiting to be read and
comprehended. Still, your link to the visual format model
is so intriguing that I am sorely tempted to add it to the
list.
However, at this point, I'm not quite getting it. If I go
into that visual formatting instruction, what exactly is
it that I will come out of it with?
My main concern is to produce a site that reads the
same on IE and Firefox and at 800X600 and 1024X768.
I can give you a couple of examples of designers who have
accomplished that, if it might help.
Thank you for that very interesting link. Only, would
you be so kind as to take a second and sell it a little
harder?
Incidentally, the results you have achieved with wellstyled.com
are extraordinary and very attractive. I also notice
some departures from the styling I have learned, with
what appears to be quite a use of nested elements,
ID and class selectors.
Thank you.
Ed

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 days 16 hours ago
London
Joined: 2004-06-06
Posts: 15667
Points: 2805

Absolute positioning pitfalls

@Edshaw
tyssen's piece was written to try and cover the myriad questions and problems stemming from the incorrect use of using position absolute and to give some guidance and further reading to enable people to have a better grasp of the issues.

It's a little unfair to ask Tyssen to yet again explain things as we have all done so often that's the purpose of the piece, Tyssen does not need to sell it Smile it stands on it's own merits take it or leave it.

There are some fundamental aspects to understand before anything else, those being the visual formatting model, how boxes are constructed on a page , the properties that one can apply to those boxes in respect of positioning those boxes on the page, these are two things that you need to concentrate on learning as they will allow you to avoid many of the pitfalls ahead, I would study the links Tyssen provided and deside for yourself what you get out of them.

If you have specific questions to ask then it's best that a new thread is opened on your question rather than people keep posting to this sticky, which then tends to get long and convoluted.

BTW I don't think Tyseen was claiming authorship of wellstyled.com it's a rather well known site for coding matters.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Westboarder
Offline
Regular
Last seen: 8 years 10 weeks ago
Joined: 2005-05-23
Posts: 36
Points: 0

Absolute positioning pitfalls

I am glad this is sticky, I don't think I can even count on two hands the number of times I've seen Tyssen (not to mention others) being confronted by a new poster and a broken absolutely positioned page.

Perhaps it would be good also to post links to places like:
Position Is Everything,
A list Apart,
Eric Meyer's website,
etc.

Links like these are probably posted somewhere in the forum, but I think they should be more conspciuous, most CSS problems I find work themselves out when you do suficient reading and apply what you have learned. It seems like most of the newbies learn the fundamental syntax and start writing pages they actually intend to implement into some type of project.

cmiller
Offline
newbie
Last seen: 8 years 39 weeks ago
Joined: 2006-02-22
Posts: 8
Points: 0

Absolute positioning pitfalls

I recently came up with a scheme that allows you to use absolutely positioned content but still lets the text flow when resized or changed. If anyone is interested check out the thread I started "Extend div to bottom of page?" I have not gotten it to work with IE yet, but it allows you to put text within an absolutely positioned layout and have the "overflow" text automatically flow into a different part of the page.

Livingston
Offline
Regular
Seattle, WA
Last seen: 8 years 23 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

Absolute for 3 column page

I've toyed with a couple techniques to create 3 column layouts. Each has pros and cons. One is to use a float left and a float right and then let a normal flow block run down the middle. Here, remembering to clear both is an important habit to get into.

The other technique I have been using on one of my sites is to absolutely position the left and right columns, margin in the block in normal flow to avoid the positioned elements. The only thing I have to keep in mind when using that technique is to make sure the normal flow block is longer (heigher) then either of the absolute positioned items otherwise the is overlap with blocks that follow.

You're absolutely right. Mastering positioning is really, really important and it can be confusing. It took me months of reading tutorials and specs to get even a basic understanding. I still consider myself a novice when it comes to this topic. Brainjar.com had the tutorial that gave me the "ah ha" I needed on positioning.

And, of course, cssZenGarden.com is a positioning technique bonanza.

Liv