Multiple iFrame positioning

How can I "divide" a page up into a series of iFrames and position them in this sort of fashion: http://img81.imageshack.us/img81/4开发者_JAVA百科605/layoutew.jpg where each "box" is a scrollable iFrame, in my case containing a scrollable list of "Genres" in the first top-left pane, then "Composers" in the middle pane, etc. (NB: it's only really the iFrame positioning that I'm having trouble with, I'm fine with coding the lists etc. I only made a point of them to add some context to my question).

---

http://www.w3.org/TR/html4/present/frames.html

div                { padding:0;margin:0; }
.container         { position:relative; width:100%; height:100%;  }
.topcontainer      { height:45%; }
.box               { float:left; width:33%; padding:5px;  }
.bottom            { height:55%;  }

 <div class="container">
     <div class="topcontainer">
        <div class="box">content</div>
        <div class="box">content2</div>
        <div class="box">content3</div>
     </div>
     <div class="bottom">Yille!</div>
 </div>