User:Volker.haas/PositionAbsolute

fixme: http://en.wikipedia.org/wiki/Special:ExpandTemplates seems to be returning crap like extra newlines. someone needs to clean up the examples 3 & 4.

Example 1
src: http://en.wikipedia.org/wiki/Alberta#Municipalities

Airdrie Brooks Calgary Camrose Cold Lake Edmonton Fort Saskatchewan Grande Prairie Leduc Lethbridge Lloydminster Medicine Hat Red Deer Spruce Grove St. Albert Wetaskiwin

Distribution of cities in Alberta



Example 2
src: http://en.wikipedia.org/wiki/Mainz_05



Example 3
src: http://en.wikipedia.org/wiki/Timeline_of_evolution

Life on Earth   -4500 &mdash;   –   -4000 &mdash;   –   -3500 &mdash;   –   -3000 &mdash;   –   -2500 &mdash;   –   -2000 &mdash;   –   -1500 &mdash;   –   -1000 &mdash;   –   -500 &mdash;   –   0 &mdash;   Life?   Photosynthesis? Eukaryotes   <div class=nudge style="    font-size:100%;     position:relative;    top:0.74em;     left:0em; "><span style="    position:relative;    align:center;    vertical-align:middle;    bottom:-4.7295817823517em; ">Complex multicellular life   <div class=bar style="   font-size:100%;    background-color:#D3D3A4;        border-style: none;    position:absolute;    text-align:center;    margin-top:0em;    height:4.7295817823517em;    margin-left:1.5em;    width:8.5em; "><div class=nudge style="    font-size:100%;     position:relative;    top:1.08em;     left:0em; "><span style="    position:relative;    align:center;    vertical-align:middle;    bottom:-2.3647908911758em; ">Animals   <div class=bar style="   font-size:100%;    background-color:#90EE90;        border-style: none;    position:absolute;    text-align:center;    margin-top:0em;    height:3.7442522443617em;    margin-left:2em;    width:8em; "><div class=nudge style="    font-size:100%;     position:relative;    top:0.34em;     left:0em; "><span style="    position:relative;    align:center;    vertical-align:middle;    bottom:-1.8721261221809em; ">Land plants   <div class=bar style="   font-size:100%;    background-color:#c7a;        border-style: none;    position:absolute;    text-align:center;    margin-top:0.51631267790672em;    height:1.8484782132691em;    margin-left:2.5em;    width:7.5em; "><div class=nudge style="    font-size:100%;     position:relative;    top:-0.19em;     left:0em; "><span style="    position:relative;    align:center;    vertical-align:middle;    bottom:-0.92423910663455em; "> "Dinosaurs"   <div class=bar style="   font-size:100%;    background-color:#cc6;        border-style: none;    position:absolute;    text-align:center;    margin-top:0em;    height:1.5765272607839em;    margin-left:3em;    width:7em; "><div class=nudge style="    font-size:100%;     position:relative;    top:-0.26em;     left:0em; "><span style="    position:relative;    align:center;    vertical-align:middle;    bottom:-0.78826363039194em; "> Mammals   <div class=bar style="   font-size:100%;    background-color:#fc8;        border-style: none;    position:absolute;    text-align:center;    margin-top:0em;    height:1.0247427195095em;    margin-left:3.67em;    width:6.33em; "><div class=nudge style="    font-size:100%;     position:relative;    top:-0.86em;     left:0em; "><span style="    position:relative;    align:center;    vertical-align:middle;    bottom:-0.51237135975476em; "> Flowers   <div class=bar style="   font-size:100%;    background-color:red;        border-style: none;    position:absolute;    text-align:center;    margin-top:0em;    height:0.015765272607839em;    margin-left:4.5em;    width:5.5em; "><div class=nudge style="    font-size:100%;     position:relative;    top:-0.86em;     left:0em; "><span style="    position:relative;    align:center;    vertical-align:middle;    bottom:-0.0078826363039194em; ">   </div Timeline> <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:36em; ">  ←  <div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">Formation of Earth   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:29.954017954894em; ">  ←  <div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">Meteorite bombardment   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:21.283118020582em; ">  ←  <div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">Atmospheric oxygen   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:4.9660608714692em; ">  ←  <div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.35em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">Ediacara biota   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:4.1777972410773em; ">  ←  <div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-2.05em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">Cambrian explosion   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:0.0078826363039194em; ">  ←  <div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">Modern-looking humans   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">   <div id=bar style="   width:auto;    font-size:100%;    position:absolute;    text-align:center;    margin-top:18em; "><div id=nudge style="   text-size:100%;    float:left;    position:relative;     text-align:left;    top:-0.75em;    left:0em;    width:7em; "><span style="    position:relative;    width:auto;    font-size:90%;    color:black;    vertical-align:middle;    line-height:100%;    bottom:0; ">    </div containsTSN> </div Legend><div id=Caption class="toccolours" style="margin:0 0.5em; float:left; padding:0 auto; border-style:none; clear:both; text-align:center; width:20.5em">Axis scale: millions of years ago. Dates prior to 1 billion years ago are speculative. </div Container>

-->

<br style="clear:both"/>

Example 4
src: Lithium?!

Example 5
src:

<br style="clear:both;"/>

Example 6


top left corner

top right corner

bottom left corner

bottom right corner

Example 7
src: http://en.wikipedia.org/wiki/Abraham_Lincoln_in_the_Black_Hawk_War

<br style="clear:both;"/>

Example 8
src: http://en.wikipedia.org/wiki/Calgary



<div style="position: absolute; z-index: 2; top: 81.9%; left: 52.5%; height: 0; width: 0; margin: 0; padding: 0;"> Location of Calgary in Alberta

<br style="clear:both;"/>

Example 9
src: http://en.wikipedia.org/wiki/Calgary_Region

Northern Alberta Alberta's Rockies Southern Alberta <div style="position: absolute; font-size:smaller; left: 114px; top: 340px; padding: 0;text-align:center;"> Calgary Region <div style="position: absolute; font-size:smaller; left: 130px; top: 242px; padding: 0;text-align:center;"> Edmonton Capital Region Central Alberta

<br style="clear:both;"/>