printing a page

Question

I am planning to print my page..... I dont want the top portion to get displayed..... how to remove the top portion while printing it in a paper........ providing my fiddle below

http://jsfiddle.net/2dMuB/embedded/result/

<div class="mainDiv" style="border-bottom: 1px solid grey; height: 80px;">
            <div class="subDiv" style="font-size: 24px; color: grey; padding-left: 35px;">
                Company LOGO
            </div>
            <div class="subDiv" style="padding-left: 50px;">
                <p><span style="font-weight: bold;  font-family: arial; color: #333;">welcome xyz!</span> xyz@defie.co</p>
            </div>
            <div class="subDivMenu" style="width: 911px; margin-top: 0px; padding-left: 17px; ">


                <div class="inline" style="padding-top: 12px; ">

                    <ul class="homePageLists" style="">
                                    <li style="padding-bottom: 5px; list-style: none; color: #333;">
                                      <a style="color: #cc0000; font-family: arial; font-size: 14px; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
                                         Menu
                                        </a>
                                    </li>
                                    <li style="padding-bottom: 5px; list-style: none; color: #; ">
                                      <a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
                                        <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_search.png">
                                        Search
                                      </a>
                                    </li>
                                    <li style="padding-bottom: 5px; list-style: none; color: #653921; ">
                                      <a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
                                        <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_inventory.png">
                                        Create ID
                                      </a>
                                    </li>
                                    <li style="padding-bottom: 5px; list-style: none; color: #653921; ">
                                      <a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
                                          <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_inventory.png">
                                          Product List
                                        </a>
                                    </li>
                                    <li style="padding-bottom: 5px; list-style: none; color: #9e1c20; ">
                                      <a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
                                          <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_inventory.png">
                                          BOM List
                                        </a>
                                    </li>
                                    <li style="padding-bottom: 5px; list-style: none; color: #ff5100; ">
                                      <a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
                                        <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_inventory.png">
                                        Customer List
                                      </a>
                                    </li>
                                    <li style="padding-bottom: 5px; list-style: none; color: #184179;">
                                      <a style="color: #666; font-weight: bold;" href="http://www.w3schools.com/" target="_blank">
                                          <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://intra.defie.co/images/cube_vender.png">
                                          Vendor List
                                        </a>
                                    </li>

                                </ul>

                </div><!--/.nav-collapse -->

            </div>
            <div class="subDiv" style="float: right;">

                  <p style="font-weight: bold;">ABC Systems</p>
                  <p>1234 lakeview Blvd, CA 94538</p>
                  <p>510-657-8981</p>

            </div>
        </div

>

Answer 1

@media print {
    .mainDiv {
        display: none;
    }
    /* any other styles you wish to target go here */
}

Answer 2

Add a print stylesheet to page, such as:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Then in that file, do a reset:

body {margin:0; padding:0; line-height: 1.4em; word-spacing:1px; letter-spacing:0.2px; font: 12px Arial, Helvetica,"Lucida Grande", serif; color: #000;}

Then set the elements you do not wish to show when you print:

.homepagelinks {display:none;}