I have a main div with a class called container that holds the other divs inside it having their respective css stylings such as spaces and positions of elements. I want the contents inside the container div to get printed. I am using javascript for that. However when I click the button the contents in preview become completly plain and have no specified styling. I want the contents to be printed exactly the way it is being displayed with all their respective stylling.

below are the codes.

The name of the css file is doc.css

doc.html this is the container and the divs inside it.

 <div class="container" id="content"> 

        <div class="ttle">

            <p></p>

        </div>
        <div class= "body">

             <p></p>
         </div>
          .
          .
          .

</div>

Javascript

function printable(paravalue){
    var backup = document.body.innerHTML;
    var divcontent = document.getElementById(paravalue).innerHTML;
    document.body.innerHTML = divcontent;
    window.print();
    document.body.innerHTML = backup;
}

Please suggest me how I can print the contents exactly the way they are getting displayed with all the css styling of their respective divs.