CSS: Fixed Position Content
Published on Oct 3, 2011 by Jamie MunroI truly believe that Facebook is attempting to shape the Internet. Every time a changed is made, there is always massive uproar – both positive and negative. A recent change that I noticed was how they began using previously "unused" content spacing. This is done intelligently and only when you have a screen resolution greater than 1280 pixels wide. It's an extremely simple process to add using the most basic CSS and some basic jQuery resize detection.
There are a few complexities to this process. Firstly, the user's browser resolution must be detected – both onload and on resize. Based on their resolution, the fixed position element might behave differently. For your example, if you have the design space it doesn't need to, but in this example I plan to use up the "extra" space I have available on either the right or left side of the content only for my users that have the resolution to support it.
If your browser width is 1280 pixels or wider, look in the top right corner, there should be a new callout box that will always "live" in that exact position even if you scroll down the page to read the content. If your browser width is less than 1280 pixels – sorry, you will just need to imagine it.
Yes, I was surprised as well as to how much easier this was then I thought! Really, position: fixed, we are done. Then a little jQuery to show/hide the element based on the browser width.
With the magic of position: fixed you and keep an element exactly where you tell it. Be warned that this element is "removed" from the regular flow so other content will overlap it – so be sure this is taken into account when you design your fixed position element.