How to make a webpage with separate frames without using the frame tag?

If you look at http://www.twitch.tv/twitch , you'll see that the page has three separate "frames": left, center, and right. Each scrolls independently of the other. But, the page doesn't use the frame (or iframe) tag. So, how do they do it?

Solution

With divs and css...

position: fixed; top: 0px;

stops the right and left columns from moving when scrolling

overflow: hidden; and overflow-y: scroll;

adds an extra scroll bar for one of the sections if the content does not fit in the defined height.

<div style="position: fixed; top: 0px; overflow: hidden; width: 100px">
   left content
    <div style="top: 10px; height: 200px; overflow: hidden; overflow-y: scroll;">   blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
    </div>
</div>

<div style="position: absolute; left: 120px; overflow: hidden; overflow-y: scroll; width:800px">
   center   blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>blabla<br/>
</div>

<div style="position: fixed; top: 0px; right: 0px;  width: 100px">
   right
</div>

Have a fiddle http://jsfiddle.net/yR4tY/