Question

I am trying to make web page which would display two other webpages side by side using frames. The problem occurs when i try to zoom out a bit so that i could see more of the page. I am using -moz-transform but it I can’t get the result i want.

I want it to look like this just with more zoom out on each individual page.
However after using transformation I get.

Code:

<div id="window1" style="height:60%; width:50%; float: left">
  <iframe style="-moz-transform: scale(0.5, 0.5); transform-origin: 0 0;" id="thistory" src="http://www.15min.lt/" height="100%" width="100%"></iframe>
</div>
<div id="window2" style="height:60%; width:50%; float: right;">
  <iframe style="-moz-transform: scale(0.5, 0.5); transform-origin: 0 0;" id="thistory1" src="http://www.15min.lt/" height="100%" width="100%"></iframe>
</div>

Any advice would be great.

Answer 1

That’s how -moz-transform is supposed to work.

What you can do is make the iframes twice the size they are, and then scale them down with transforms. That would scale down the scrollbars, too, so you’ll need to enclose scrollbar-less iframes inside scrolling divs (overflow:auto, etc.) so you get normal-sized scrollbars.