In this article, I show you how you can keep certain information on a web page visible, while another portion of the web page is scrollable, without using frames, because search engines do not index pages with frames. This is not the only reason to use frames, but if it's the reason you use them, then you now have a solution to the search engine problem. I will present the solution similar to the way that I discovered it.
SEO Scrolling Frames Problem Solved - The Trial Phase (Page 2 of 4 )
With all of the above in mind, I decided to mimic (without using frames) a frame-set called "The Banner and Contents Frameset," using only one BODY element. The following diagram illustrates this:
Fig.1. Banner and Content layout
With this layout, the Header portion does not move. The Sidebar has the links for different pages. The Main section has scroll bars. The information in the Header and Sidebar remain in their positions while the Main section is scrolled. This is what we want; it satisfies the first purpose of having frames.
I made the Header portion a DIV element. I gave it a width of 100% in CSS. I gave it a height of 20% in CSS. I made the Sidebar a DIV element and gave it a width of 25% and a height of 80%. Note: if the height of the header is 20%, then the height of the sidebar has to be 80% for the entire height of the window’s client area to be covered.
I made the Main portion a DIV element and gave it a width of 75% and a height of 80%. Note: if the width of the Sidebar is 25%, then the width of the main portion has to be 75% for the entire width of the window's client area to be covered.
I gave the DIV element for the Main portion scroll bars with the CSS property “overflow:scroll.” Note: any block level element, by default, begins with a line break and ends with a line break. So a block level element does not allow an element on its sides by default. Thus, by default, the DIV element for the main portion is supposed to appear below the DIV element for the Sidebar.
To make these block level elements appear horizontally on the same line, side-by-side, I converted them to inline elements by giving each of them the CSS property “display:inline.” This cancels the effect of the line breaks before and after their blocks. An inline element allows other elements on its sides, so the Sidebar and Main portions can appear next to one another on the same horizontal line. I gave the three different regions borders, so that I could see the demarcations on the web page. The next page has the code I arrived at. You can try it.
Style Sheets 
HTML5 Boilerplate Introduction
