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

Avatar of Chris Coyier
Chris Coyier on (Updated on )

It is a very healthy technique these days to center your entire website horizontally in the browser window (but be careful), especially nowadays 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:

[MISSING IMAGE, Sorry]

And this is with the browser window stretched out:

[MISSING IMAGE, Sorry]

The “Hangtab” is just an absolutely positioned div:

#hang_tab {
  position: absolute;
  top: 7px;
  left: 0;
  width: 157px;
  height: 93px;
}

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

View Demo

Download Files