Hi George616,
You need to adjust the css. Check the below example.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Portrait ID Card Authentication</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="forprinters.css" media="print" />
<link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' />
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<!-- Our Custom CSS -->
<!-- <link rel="stylesheet" href="style.css"/>-->
<link href="css2/style2.css" rel="stylesheet" />
<link rel="stylesheet" href="style2.css" />
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<style id="table_style" type="text/css">
#parent {
position: relative;
width: 200mm;
height: 257mm;
border: solid 1px;
font-size: 24px;
text-align: center;
padding: 1cm;
margin: 10mm auto;
background: white;
}
#child {
position: absolute;
right: 40px;
top: 40px;
cursor: move;
background-color: #fafafa;
border: solid 1px #00003D;
font-size: 24px;
text-align: center;
backface-visibility: hidden;
background: unset;
height: 90px;
width: 86px
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.subpage {
padding: 0.2cm;
border: 5px red solid;
}
@page {
size: A4;
margin: 0;
}
@media print {
html, body {
width: 210mm;
height: 297mm;
}
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container" id="centered" style="margin: 0 auto; margin-top: 1%; text-align: justify; text-align: center; margin-left: 5%;">
<asp:Button ID="btnPrint" runat="server" CssClass="btn btn-primary navbar-btn" BackColor="SteelBlue" Width="150px" Height="34px" Font-Size="Medium" Text="Print" OnClientClick="return PrintPanel();" />
</div>
<asp:Panel ID="pnlContents" runat="server">
<div class="book">
<div class="page" id="parent">
<div class="subpage">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/1.jpg" BorderStyle="None" Width="165mm" Height="230mm" />
<div id="child1">
<div id="child">
<asp:Image ID="Image2" runat="server" ImageUrl="~/images/2.jpg" BorderStyle="None" Width="86px" Height="90px" />
</div>
</div>
</div>
</div>
</div>
</asp:Panel>
</form>
<script>
window.onload = addListeners();
function addListeners() {
document.getElementById('child1').addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
}
function mouseUp() {
window.removeEventListener('mousemove', divMove, true);
}
function mouseDown(e) {
window.addEventListener('mousemove', divMove, true);
}
function divMove(e) {
var div = document.getElementById('child1');
div.style.position = 'absolute';
div.style.top = e.clientY + 'px';
div.style.left = e.clientX + 'px';
}
function PrintPanel() {
var panel = document.getElementById("<%=pnlContents.ClientID %>");
var startStr = "<!--startPrint-->";
var printWindow = window.open('', '', 'height=500,width=400');
printWindow.document.write('<html><head><title>Template</title>');
printWindow.document.write('<style type = "text/css">');
var table_style = document.getElementById("table_style").innerHTML;
printWindow.document.write(table_style);
printWindow.document.write('</style>');
printWindow.document.write('</head><body >');
printWindow.document.write(panel.innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close();
setTimeout(function () {
printWindow.print();
}, 5000);
return false;
}
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
</body>
</html>
