Positioning an element to the top right

Back when there was tables

You could resize the page down, and if it went below a certain level, the horizontal scroll bars would appear. This was A Bad Thing. Except these days, folks have a hankering for those bars in some circumstances.

Then some CSS layouts used positioning

A layout I often use is two positioned div's, surrounding a third, static div, which leaves space either side for them, using margins. This gives a liquid layout, but with two fixed-width columns either side of the central content area. The problems arise when the central content has (for example) a large image in it, and the browser width is reduced to the extent where in the old days, a horizontal scroll bar would appear.

With positioning, the navigation bar slides on top of the content, obscuring it completely.

It would seem that the positioned element is positioning itself from the top of the document, but from the right hand side of the viewport, not the root element.

So what we need to do is persuade the browsers to position that big block of text to the right to the side of the HTML element, and not the viewport. First, we use the body element as a containing element:

body {

/* Fix for >800 screen resolution */
position: relative;
min-width: 800px;

}

Now, the bad news...

This doesn't work in IE5 on the PC and the Mac, or 5.5 on the PC. Well, by "doesn't work", I mean you're left in exactly the same position you'd be in anyway, with this layout technique. Where the navigation can overlap the text, if you pull in the side of the browser.

But all of those lovely modern browsers, like Fireyfox and Safari do it just right. Heck, even Internet Explorer 6 loves it. Opera needs a bit of extra code, so it will display a scroll bar:

/* For Opera and !IE5 Mac \*/
html {

overflow: auto;

}
/* */

The min-width declaration is ignored in IE6, and there's a weird effect where by the content which can resize to avoid the edge of the page still does (so you get too much space between the paragraphs of text and the navigation bar), but I suppose the important thing is that all the text is still legible.

Use your powers of imagination, and pretend this is a navigation bar, or suchlike

This div is positioned absolutely from the top right hand site of the screen. On modern browsers, this is even true if the screen is resized.

Now, some latin:

Sed et sem. Mauris tincidunt pellentesque lorem. Suspendisse et velit sit amet diam consequat pharetra. Aliquam porttitor odio vitae felis. Ut sollicitudin. Donec sodales, libero id fermentum consectetuer, dolor orci convallis ligula, scelerisque congue arcu ipsum eu nibh. Nunc et augue non ante ultricies cursus. Aliquam non mi vel risus sodales tincidunt. Integer suscipit. Mauris sit amet enim nec sapien convallis lacinia.

Aliquam ullamcorper, sapien sit amet consequat hendrerit, lorem ligula tincidunt nunc, a pulvinar nisl mi a turpis. Sed mi neque, aliquam non, lacinia quis, venenatis a, erat. Aenean ornare nulla. Mauris velit massa, posuere a, feugiat at, imperdiet et, lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum a dolor. Proin pretium, orci blandit mattis varius, enim eros bibendum ipsum, ac molestie nisl turpis at lacus. Aenean sagittis, massa et tincidunt eleifend, tellus pede sagittis nulla, vitae ultricies nunc nisi et lorem.