Need to PRINT a certain Div and ignore everythign else on the page

My client wants the "Internet Special" on various pages to be printable with nothing else from the page printing. I could solve this by creating a PDF or JPEG that people could download, but given that he plans to change these specials and won't know how to update the downloadable document, I need to find another way. Thus... I created a ".printarea" class and have attempted to hide everything in the body by using a universal selector and setting the body to "visibility: hidden" and the specific class of the area I want printable to "visibility: visible". However, this is proving to be too broad since the printable area is a child of the Body, which is hidden.

@media print {
body * { visibility: hidden; }
.printarea { visibility: visible; }

I have only added the .printarea class to the following page for testing purposes ( ) and the area I'd like to print is under the "Internet Special" tab. I have to have the Tab open to be able to print that area and if I hit control P to print the page, it tries to print 3 blank pages with header/page link info at the top and you can see the dashed border of the Internet Special with nothing else. I think the "body *" is blocking everything.

In a perfect world, I'd like to not only print a certain area, I'd like to add a button above it that will print it. Does anyone have any suggestions?

View Replies:
Steevb replied on at Permalink Reply
I have done this for a client which also prints out their logo (not on web page). Give me while to find the css file I used and I'll get back to you.
maar replied on at Permalink Reply

I used this bootstrap code some time ago:
<!DOCTYPE html>
<!-- all your head stuff -->
<!-- all your header stuff -->
<div id="wrapper">
<!-- all your content stuff - things in here will print -->
<!-- all your footer stuff -->

And then the css:
@media print {
   body * {
      visibility: hidden;
      margin:0; padding:0;
   .printable * { 
      visibility: visible;
   #wrapper {
      margin:0 !important;
      padding:20px 0 0 0 !important;
   #header, #footer, .btn { display:none; }
   .col-sm-1, .col-sm-2, .col-sm-3, 
   .col-sm-4, .col-sm-5, .col-sm-6,
maar replied on at Permalink Reply
You then of course have to wrap everything you want to print with the .printable class.
Steevb replied on at Permalink Reply
I have a form wrapped in a ‘printoff’ id, a ‘contentHolder’ class for the content, a submit button (.submit) and a print button (.printform). Then with ‘@media print’ I display some elements and hide others. The only thing that prints is the 'printoff'

@media print {
.printform, .submit {
visibility: hidden
#printoff, .logo {
display: block;
visibility: visible;
border: none;
padding: 0;
overflow: visible
barkingtuna replied on at Permalink Reply
Thanks for the suggestions... both of you. I'll play with it today and post results.