title: Scaling divs and content to fit
body: <p>I am building a module to display html divs(pages) which are designed to in a later stage be printed out as A4s. The area where these divs are displayed is however to small to display the full width of the divs and thus the pages and their content need to be scaled down to fit within the display-area at hand. </p>
  
  <p>The children of the a4-pages are styled with both set widths/heights and percentages so it would be a nice approach to use the CSS3 Tranform scale to scale the pages down just enough so that they can be displayed but this becomes problematic since the scale is done after rendering and thus creates an white area around the pages.</p>
  
  <p>I'm using jquery to rescale the pages when window is resized and will also implement this when page is loaded.</p>
  
  <p>How do i scale several divs within a common wrapper and also readjust the parent so that the scaled div is showed without any padding around it?</p>
  
  <p><strong>Edit:</strong> I've put together a simple fiddle displaying the issue <a href="http://jsfiddle.net/96jkU/" rel="nofollow">http://jsfiddle.net/96jkU/</a> </p>
  
  <p><code>#toBeScaled</code> should display over the full width of <code>#displayArea</code> but still be scaled to <code>0.5</code></p>