A Web Design Community curated by Chris Coyier

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

By: Chris Coyier on 8/20/2007

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:
coda1.png

And this is with the browser window stretched out:
coda2.png

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.

hangtab1.png
hangtab21.png

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]

4 Responses

    This comment thread is closed. If you have important information to share, you can always contact me.

    * This website may or may not contain any actual CSS or Tricks.