Imagine that you are reading a web page and you feel the need to use a calculator. You move your mouse pointer to the edge of the web page and a calculator appears from that edge. Imagine that you are reading a web page and you feel the need to put information in the message box (small form); you move your mouse pointer to the edge of the page and the message box appears. I like this scenario. If you do as well, keep reading and you'll learn how to make it a part of your web site.
The above code has the following elements: XML, DOCTYPE, HTML, HEAD and BODY.
Before we start designing according to the user’s requirements, we should learn some basics. Specifically, we shall learn how to make a DIV element move inside another DIV element. Our inner DIV element has components of a calculator. We use the calculator as an example. This is the CSS and HTML layout of the calculator:
There are two DIV elements. The outer one has the ID "Cont," meaning container. The inner one has the ID "Calc," meaning calculator. You can see the components of the inner one. The components are made up of an Input Text Control and buttons. There are line break elements that keep the components in rows. These two DIV elements have to be in the BODY element of your web page. The style sheet is normally in the HEAD element of your page.
HTML 
Scrolling Functions for HTML Magic Edges
