Expressing IT

This post might be a good example for the phrase “Teaching grandma to suck eggs” … Cause this is just BASIC CSS Stuff. But for those , like the oblivious me, this might be a blessing in disguise. I always thought (I could loose my job for saying this), it was ONLY possible to keep some part of the HTML page content STATIC (meaning, its position remains AS IS on Window Scroll), using some smart scripts, Doing all those scientific calculations to find dynamic position, trapping Window.scroll events and setting timeouts etc.

Never thought it could as simple as this …. Here in the CSS/HTML below , I have four static blocks, one fixed to each extrimities of the page, TOP, RIGHT, BOTTOM and LEFT … needless to say … you can choose any one or more if need be …

CSS
.static{display: block; z-index: 10; color: #ffffff; overflow-x: hidden; overflow-y: hidden; position: ixed;
}
#contents{ margin: 100px 150px 0px 160px; border:1px solid #e6e6e6 }

#wrap-t { top: 0px; background:#33CC66;  width: 100%; height: 55px;}

#wrap-l { top: 80px; background:#FF9966; height:300px; width:150px; border:2px solid #e6e6e6;}

#wrap-b { bottom: 0px; background:#3333CC;  width: 100%; height: 55px;}

#wrap-r { top: 80px; background:#6666FF; height:300px; width:140px; border:2px solid #e6e6e6; right:0; }

HTML
<div id=”contents”> You main page contents </div>
<div id=”wrap-b” class=”static”>
  Static Content on Page  bottom
</div>
<div id=”wrap-t” class=”static”>
  Static Content on Page  Top
</div>

<div id=”wrap-l” class=”static”>
  Static Content on Page  left
</div>
<div id=”wrap-r” class=”static”>
  Static Content on Page  right
</div>

View a wroking sample here