HangTab: Create a Sticky Tag from the Edge of the Browser Window (Even with Centered Content)

Published August 20, 2007 by Chris Coyier

It is a very healthy technique these days to center your entire website horizontally in the browser window (but be careful), especially nowdays with monitors getting bigger and bigger and with higher resolution. Sometimes it's nice to break the rules though, for effect. Check out Panic's website for their software Coda.

This is with the browser window fairly small:

And this is with the browser window stretched out:

The "Hangtab" is just an absolutely positioned div:
#hang_tab {
position: absolute;
top: 7px;
left: 0px;
width: 157px;
height: 93px;
}

Here is the CSS-Tricks version. Feel free to download and use freely.

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]