Here is a sample of the page, with a header, footer, menu and content with thier div ids.
This works good for IE with some some issues like
- printer settings,
- blank space where controls are hidden etc.
and putting a class=noprint for all the non required divs during print, as seen below
And this worked perfectly for all the browsers without even any minor issues stated above.
And would you believe this is just the tip of the iceberg as far as @media is concerned. There is almost no limit to what can be done with alternate-media stylesheets. Using them appropriately is the key to creating pages which can be styled for regular screen output, printing, legible display on handheld devices, special styles for the blind, and much more. As browsers add support for more media, and more ways to set up media-specific styles, we’ll return to this subject for more. Until then, try out some print-media stylesheets on your pages, and see how you can make your site better and more accessible than ever.
There are currently ten defined media types:
Go explore them and harness the power of CSS!