Wednesday 12 October 2005

Relatively Positioning an Elephant

UNINTENTIONAL HUMOR is often the funniest. I’m co-presenting with Eric Meyer at the always-fabulous UI Conference (celebrating its 10th year!) and Eric, describing positioning, inadvertently said:

“Here’s how we relatively position an elephant”

Now, Eric’s known for his oft subtle humor, but this was more a we-just-finished-lunch-so-we-all-need-a-nap situation. It came flying out of his mouth, no humor intended, instead of the word element.

Oh, it was a funny moment, and I’m compelled to share it with everyone! But, I’m left wondering: Just how does one relatively position an elephant?

Filed under:   humor,standards
Posted by:   Molly | 13:21 | Comments (69)

69 Responses to Relatively Positioning an Elephant

  1. Maybe it is important to set enough margin around an Elephant when positioning it :)

    margin: 0.2 miles;

  2. Jay Reding says:

    How do you position an elephant?

    Very, very carefully.

  3. Jimmy says:

    Web 2.0 has elephant positioning support.

  4. Maxine says:

    LOL – and no one but Eric should have delivered this line, I love his subtle drolleries.

    As for the line itself, I have a habit, in my idle moments, of pondering upon the possibility of sentences which make sense grammatically, and perhaps even logically, but have never been said before. This definitely qualifies :-)

  5. Meri says:

    Well, obviously to position an elephant relatively, you move its environment around. So it’s relatively positioned, do you see? ;-)

  6. Malarkey says:

    “Just how does one relatively position an elephant?”

    With relative ease (if you’ve got a bag of peanuts).

  7. Dean Edwards says:

    I thought you just used your mouse?

  8. Dustin Diaz says:

    You take an elephant, write it to an iFrame, make an xmlHttpRequest for nuts (elephants love nuts), and slowly, the elephant will begin to move.

  9. Dustin Diaz says:

    Just be sure to keep your ‘mouse’ away from the elephant. they don’t like mice according to the peeka-boo bug.

  10. How do you position an elephant? Two in the front, two in the back.

    Oops, sorry, mixing jokes there.

  11. Keri Henare says:

    It doesn’t matter how you position your elephant because it will always crush IE

  12. Jim says:

    Relatively positioning an elephant is easy. Good luck getting one to float though.

  13. Kevin Yank says:

    I understand an elephant will naturally assume a conspicuous position in the corner of the room if you don’t talk about it.

  14. umm lets see… is this elephant a child of a bigger elephant. Are they together? Gee am on a ‘safari’! Close your eyes, think FOUC, elephant gone! Tada!

  15. Dustin Diaz says:

    Well, first you need to target your elephants with JavaScript. Then add the appropriate methods to fire upon ‘mouseup’

    var dumbos = getElephantsByTagName(‘dumbo’);
    for ( i=0;i

  16. Dustin Diaz says:

    I’m beginning to hate comment fields that much posts with code…

    var dumbos = getElephantsByTagName(’dumbo’);
    for ( i=0;i <dumbos.length;i++ ) {

  17. Andrew K says:

    Who cares how you position it; how the heck are you supposed to serialize it and pass it via XMLHttpRequest??!
    Now THAT’s load testing 0_o

  18. Ian Lloyd says:

    There was a news broadcast on TV a while ago that covered the fire that finally destroyed Brightoin Pier (you’ve seen what’s left of that, Molly). As the news headlines rolled, the serious music thumping away in the background, the headlines were read out, including something along the lines of “Brighton Pier, already battered by the elephants, burns down …”

  19. How to position an elephant?… Well, it depends: is it an indian or african elephant?….

  20. Faruk Ateş says:


    #elephant {
    position: relative;


  21. Faruk Ateş says:

    Okay, why is it so huge? o_O

    .elephant {
    position: relative;

    (previous used an id selector, didn’t quite work though)

  22. Well, it depends: is it an indian or african elephant?

    Look, to maintain airspeed velocity, an elephant needs to beat its wings 42 times every second. Am I right?

  23. Bob says:

    Just sit him next to your grandparents.

    Relative positioning… get it?

    Oh, I crack me up.

  24. Chris says:

    No need to shove the elephant anywhere she doesn’t want to go, ’cause she’s still in the flow. But now you can safely feed her absolutely positioned peas, knowing that she’ll contain them all.

  25. nick holmes says:

    Eric suggested using “6 tons of peanut butter at the time” :-)

  26. Isofarro says:

    According to wikipedia, elephants are of the class “Mammalia” and an order called “Proboscidea”. Since the order has a name, its probably unique, thus being an id. Of course, being a member of an order, an elephant is obviously a list item for an ordered list.

    So, naturally:
    ol#Proboscidea li.Mammalia elephant {
    position: relative;
    background: inherit; /* Yes, little elephants have big elephants as parents */
    ol#Proboscidea li.Mammalia elephant:after {
    content: “”;

    The designer is strongly advised to use unobtrusive JavaScript. It is well known that ol#Proboscidea li.Mammalia elephant are reliably unreceptive of mouse events, which have been known to trigger peek-a-boo bugs in a number of browsers.

    The second style rule (with the pseudo class :after) is there to fix the frustrating bug of the elephant leaving a constant stream of nasty little turds as it moves along the document. The designer is strongly advised not to move the elephant too far from its starting position, or keep it on screen for too long. Although elephants don’t have memory leaks, those turds keep multiplying rather quickly, resulting in a core dump on many platforms. Mouse events normally accelerate the problem.

  27. Isofarro says:


    A number of web designers have reported that having elephants on their pages makes the pages feel heavy. Fortunately, using the CSS sibling selector and an aural stylesheet hack, we can use “the Hollies hack” to solve that problem:

    elephant+elephant {
    font-weight: lighter;
    voice-family: male;
    /* he ain’t heavy… he’s my brother */

  28. John from Canada says:

    What elephant?

  29. C Montoya says:

    Wherever you want… just don’t put him in a table. Elephants are NOT tabular data :)

  30. paula says:

    hummm… your lack or faith is disturbing.
    use the float luke

  31. Bjoern says:

    >Wherever you want… just don’t put him in a table. Elephants are NOT tabular data

    But if you can’t put it IN a table, what can you do… position it ON the table is not a good option…

  32. Pingback: Ergopole / Architecture d’information et utilisabilité » Archive du blog » CSS : Positionnement relatif d’un éléphant

  33. Chris K says:

    How about….

    #cage {position: absolute; border:3in solid steel; margin: 120in; background-image: url(zoo.gif);}
    #elephant {position: relative; color:gray;}
    #poop {display:none;}

  34. Eric says:

    As it turns out, relatively positioning elephants is really easy… but only if you use one of the Mozilla trunk builds.

  35. Keith Burgin says:

    mammal.elephant {
    position: relative;
    bottom: 0; /* elephants are rather heavy. No need to try and lift him */
    left: 50%; /* wherever they are, they are in the middle of it */
    display: block;
    margin: 1000000em; /* keep your distance */
    color: #999999;
    border: none; /* ideally */
    padding: 6000em;

  36. Alison says:

    Use the box model?

    :: mutters – all this fuss about an elephant in the corner of the room ::

  37. Ben Buchanan says:

    One byte at a time?


    Besides, as that coke ad proved; you can float an elephant…! :)

    *ducks again*

  38. Alistair says:

    1). You could download it as a .ele file
    2). Open it in Photoshop, flatten the layers, then save for web… easy

  39. Olly says:

    There is no elephant.

  40. Pingback: JG’s showcase » Eric Meyer on relative animal positioning

  41. Pingback: Janusz “Kali” Kaliszczak » Molly mnie zabiła :)

  42. Pingback: Things and Others » Blog Archive » Eric Meyer on Relatively positioning an elephant

  43. Steph_B says:

    Bruno Kerrien, can you explain what difference between indian or african elephant?

  44. G Evans says:

    LOL, arrived late on this one-

    Just ask Mother!

  45. Pingback: Swobodin’s Blog » Blog Archive » CSS Humor

  46. Swobodin says:

    Sorry for the previous comment, it seems that google is foolishing around, I have only wrote your article on my blog, and I don’t know how did this comment appear.
    Please delete it, and sorry again for the inconvenience.

  47. Well it depends on the sex of the elephant.

    #include “elephant.h”

    int main(int argc, char **argv)
    int relative_position;
    if (*argv[1] == ELEPHANT_SEX_FEMALE)
    relativ_position = RELATIVE_E_FEMALE;
    relative_position = RELATIVE_E_MALE;
    relative_position = RELATIVE_E_UNKNOWN;



  48. Brian Byers says:

    Saw you and Eric at UI10 in Boston. Good stuff. You both were definitely in rare form.
    Thanks for your work in web standards and for visiting Sandia recently.