Grow your CSS skills. Land your dream job.

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

Published 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 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

Comments

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

*May or may not contain any actual "CSS" or "Tricks".