Resizing to page width for print style sheet

Question

So I've got a page that shows an image with some absolutely positioned text on top of it.

I want to write a print style sheet for it so that:

1. the image is resized to fit the width of the page
2. the text is repositioned and resized to maintain relative position and size with the image behind it

So I know I can do (1) with just max-width: 100%, but I'm not sure how to accomplish (2). I'm okay with using some javascript if necessary, but I wanted to know if there's a way to do this in pure CSS. If I do need to use javascript, what can I hook to check for the pixel width of the image in the printed page? Just use the calculated width as normal?

---

And yes, this question might be more appropriate for DocType, but I've yet to get any help over there.

Answer 1

I think you could happily leave it to the printer driver if you trim off the whitespace around the images, and then replace the margins on-screen with css, and the remove it again in a print-media stylesheet. Buiding-in the page margins is going to cause problems.

Answer 2

My problem was that I had set overflow: auto in the main div, which was causing the contents to overflow the printed page.

To fix it, all I needed to do was set overflow: none.

The overflow: auto was what was making it print like