How to customize the printing while using Window.print ?

Question

i want to print a invoice and i use a print.css by media=print and when i change the current stylesheet to print.css i could able to view what i should be printing without the titles and content left aligned.

But still while i'm printing there is space in the top and left and its taking up whole a4 sheet and also the whole width of the page.. But i've defined a body width of just 550 px.

While i view to print preview, it takes the whole width instead of taking up 1/3 of the width..

My print.css is

body {
  width:550px;
  height:450px;
  color:#000000;
  margin:0;
  padding:0;
  word-spacing:1.1pt;
  font-family : "Times New Roman", Times, serif;
  font-size : 10px;
  text-align:left; 
}

a {
  visibility :hidden;
  display : none;  
}

input{
  display : none;  
}

table { margin: 1px; text-align:left; }

#list,#head,#cont,#fotter,#oth,#links,#name,li,ul,ol {
  display : none;  
}

I'm printing through browser using window.print, so is there any special configuration i need to do...?

Answer 1

Unfortunatley there's nothing you can do whilst using window.print (or any other JavaScript method).

The only way to get your page to print the way you want is to select File > Print Preview and then configure any layout settings there. For example, on Firefox you can make the webpage stretch across a single sheet of A4.