How can i make the footer to stick bottom of the page no matter what resolution is the screen is and scrolling?
Because currently i am able to stick the footer bottom of the page with my desktop, but once i change to laptop view
or the paragraph/content are too long, the footer wasn't stick bottom of the page already if i scroll down.

#footer
{ font: italic normal 12pt Cambria;
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: transparent;
  text-shadow: 1px 1px #fff;
  color: #535353;}

Try something like:-

#footer {
  font: italic normal 12pt Cambria;
  background: transparent;
  text-shadow: 1px 1px #fff;
  color: #535353;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 40px;
  width: 100%;
  z-index: 999;
 }

1) So can you clarify if you want to push the footer to the bottom of the page, regardless if there is enough content to fill the page? This is also known as a "sticky" footer. This is useful when you want the footer to be placed at the end of the content but you may have a page where there's not enough content to fill the page and you still want the footer at the bottom. Demo - Pushing a Footer to the Bottom of a Web Page

2) Or do you want the footer to remained in a fixed position (bottom of display) and stay there even if there is more content... while the user scrolls down the footer stays fixed?

paulkd's sample should work. Here is a demo to look at that uses this sample code. How to Keep a Footer Fixed Even While Scrolling

Thanks both of you guys.
By modify Position: Fixed; able to solve my problem. Thanks