Issues with allignment on print preview for html page

Question

I have developed a html page But whenever I do a print preview all my contents are getting disloacated.

I am dam sure that I made something wrong at my css giving size ,height,width..

But not sure where exactly its going wrong. Is there any alternative ,so it will not affect my existing css. I have heard about media tag...do you people have any example for the same.

Answer 1

You can use custom CSS for printing: Option 1: Append media print property to your css stylesheet link

    <link href="/css/style.css" media="screen,print" rel="stylesheet" type="text/css">                               
                                               ^^^

And then you can write custom css for printing in this stylesheet

@media print {
    div {
        width: 100%;
    }
}

Option 2: You can add whole css file for only printing.

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

In this case is not necessary to use @media print { in this stylesheet