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?

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

/stickified

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

Great job!

Does this mean that...

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

will be displayed poorly in various window settings?

NellieW

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.

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

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.

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.

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

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

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

Hi Kristy, please start another thread about your problem.

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

@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 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.

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.

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.

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