Question

I'm trying to learn about the 960 grid, and was looking at Skeleton.

http://www.getskeleton.com

If you visit the page, you will notice that while the right side of the page scrolls up and down, the left side is fixed (sidebar) always remains in place. If you shrink the browser window passed a point, the sidebar disappears.

I've looked at the css, and can't find anything about how this sidebar works. How did he do it?

Was it helpful?

Solution

The sidebar uses position:fixed; to stay where it is. The responsive side (re-sizing the browser) is most likely the use of media queries. Example:

@media only screen and (max-width: 999px){
   //if screen is less than or equal to 999px (just a random number) execute this code
}

@media only screen and (min-width: 1000px){
   //if screen is greater than or equal to 1000px (just a random number) execute this code
}

UPDATE

RESIZE THE BROWSER

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top