Skip to: Navigation Content Search


Opera and absolute positioning

Opera still hasn’t got it right with absolute positioning and it’s the reason why this site is left aligned today. Oh mercy!

Take, for example the ol’ horizontal centering technique;

body {text-align: center; }

with a wrapper container nestled snugly inside:

#wrapper {width: 990px; margin: 0 auto; text-align: left; }

Let’s now add a div inside the wrapper to cradle your wonderful header elements:

#header {position:relative;min-height:100px; }

Now, here’s the fun part - Opera will add the value of the distance from the edge of the window, that is, the left margin of your horizontally floated wrapper div (which is auto and therefore variable), to the left value of any absolutely positioned element in the header div.

Call me crazy, coyote!

I can’t find much on the web addressing this problem and maybe there’s a simple workaround, however it just doesn’t work as it should, nor how you expect, which is far worse. Worse than vegemite on toast with no butter.

Yet from what I can gather, it’s a known affair and solutions range from hacking with JavaScript to constructing a torturous series of relatively positioned divs, both of which seem about attractive as a cold plate of baked beans and a hangover. So if there’s anyone reading this, and they can refute or provide a reasonable suggestion to this problem as I perceive it, then I salute you in advance and bless your pets.

Naturally, one must forgive Opera for its faults. For me they are few and although it’s not my main browser, I use it often, usually when I want a snappy response and Firefox has just eaten up my last 100 megabytes of memory.

Leave a Reply