Question

Clearly, frames (and frames) have some serious problems when used without discretion; however, they allow for a certain ability to divide a webpage into essentially two different, non-overlapping areas. If I were to use

   <frameset rows="40,*">   
      <frame src="page_1"></frame>
      <frame src="page_2"></frame>
   <frameset> 

I could divide my one page between the two framed pages without having to worry about conflicting styles, html tags, etc.

I was hired to write an in-browser server, one which has a small “tool bar” at the top of the page, and then under it, the proxied webpage. I hate most all things about frames; however, I am having trouble replicating their ability to cleanly differentiate between two areas. If I use position: fixed on my top bar, I then have the problem of interfering with any proxied page below. And likewise, if I attempt to shift the entire proxied page down to make room for the bar, it ends up “distorting” the style of the proxied page, which is quite unacceptable.

So my question is: How can I best manage this situation in terms of either modifying the proxy code to incorporate a top bar, modifying the top bar to not interfere with the proxied page below, or using a feature I am not yet aware of that produces the same effects as the rows="40,*"? Javascript, PHP, HTML, CSS, etc. are all potential tools to fix this. Also, cross-browser compatibility is very important. I apologize for not posting code to my proxy, but truncating it would be very difficult.
Thank you!

Answer 1

This is exactly the kind of situation that iframes were designed for – including content you don’t have control of. Put your toolbar in the html, then include the proxied page with an <iframe> tag.