Getting all content of <div> to print

[Claus Mygind]

When I design my pages, I am putting the content into <div> tags. For example I may have two <div> tags side by side content on left and on the right.

My problem is this, if I want to select print from the browser menu only the content visible on the screen prints. Any content which you would have to to scroll down to see is cut off.

I have created a print.css file with my other print settings to remove things like navigation elements and setting the color of the font and background to black and white respectively.

 /* Remove unwanted elements */
#header, #nav, .noprint
{
display: none;
}
 
/* Ensure the content spans the full width */
#container, #container2, #content
{
width: 100%; margin: 0; float: none;
}
 
/* Change text colour to black (useful for light text on a dark background) */
.lighttext
{
color: #000
}
 
/* Improve colour contrast of links */
a:link, a:visited
{
color: #781351
}
 
 .printBody 
 { 
    color: #000000;  
    background-color: #FFFFFF;  
 } 
 

I would like to add the style, that would let me print the entire content of the <div> even if it is multiple pages.

Not too worried about page breaks for now, just want the content to come out.

The two side by side <div's> look like this:

   <div id="LeftHalf" align="center">
       <table id="GeoTechTable" width="99%" align="center" border="1">
            <tbody id="GeoTechBody" align="center">
           <tr>
                <td class="MenuTitle" colspan="4">Geo Tech Lab Work</td>
           </tr>
           <tr>
                 <td class="subHeading3">Job #</td>
               <td class="subHeading3">Boring</td>
               <td class="subHeading3">Container #</td>
               <td class="subHeading3">Lab Tech</td>
           </tr>
       </tbody>
   </table>
 </div>
 
 <div id="RightHalf" align="center">
    <table id="CMETable" width="99%" align="center" border="1">
    <tbody id="CMEBody" align="center">
    <tr>
    <td class="MenuTitle" colspan="4">CME Lab Work</td>
    </tr>
    <tr>
        <td class="subHeading3">Job#</td>
        <td class="subHeading3">Lot/Date</td>
        <td class="subHeading3">Container #</td>
        <td class="subHeading3">Lab Tech</td>
    </tr>
   </tbody>
</table>
</div>
 

And the styles already assigned to them looks like this:

#LeftHalf {
    position: absolute;
    white-space: nowrap; 
    left: 0%; 
    top: 25px;
    width: 47%;
    color: #333333;
    padding:5px;
    font-size: 10pt;
    overflow: hidden;
    z-index: 98;
}
#RightHalf {
    position: absolute;
    white-space: nowrap; 
    left: 50%; 
    top: 25px;
    width: 47%;
    color: #333333;
    padding:5px;
    font-size: 10pt;
    overflow: hidden;
    z-index: 98;
}
 

[Claus Mygind]

I can get it to work if I assign this to the id

#printDiv
{
    overflow: visible;
    height: auto;
}
 

But then I loose my formatting of side by side for the screen definition. Where the overflow is hidden.

#LeftHalf {
    position: absolute;
    white-space: nowrap; 
    left: 0%; 
    top: 25px;
    width: 47%;
    color: #333333;
    padding:5px;
    font-size: 10pt;
    overflow: hidden;
    z-index: 98;
}
 

If I just leave it as a class ="printDiv", it inherits the "LeftHalf" and the print does not work. Hmmm!

.printDiv
{
    overflow: visible;
    height: auto;
}