-1

I have an html report which I want to display twice on one page.

I want it at left and right respectively. It works fine in Portrait view. (I defined page size in css) . I want to display report with duplication in Landscape view. Here is my html code

body {
  background: rgb(204, 204, 204);
}

page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}

page[size="A4"] {
  width: 21cm;
  height: 29.7cm;
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <title>my receipt</title>
</head>

<body>
  <page size="A4">
    Name : Saad Last Name : Nazir AGe : 32 Class : Bsc
</body>

</html>

<html>
<!-- (to display again on one page) -->

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <title>my receipt</title>
</head>

<body>
  <page size="A4">
    Name : Saad Last Name : Nazir AGe : 32 Class : Bsc
</body>

</html>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Mian Omer
  • 1
  • 2

1 Answers1

0

Your HTML is invalid. You do not need to have two sets of HTML documents on the same page, just have two <div></div> or <section></section>. There is no such tag as <page> and you do not close it. Also your title was only half there.

Here is an example of a well formed HTML document with a print stylesheet that should spread the divs evenly on an A4 page in portrait and landscape

body {
  background: rgb(204, 204, 204);
  /* This should be the size of an A4 paper */
  width: 210mm;
  height: 297mm;
  /* Flexbox layout to distribute divs evenly */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

div {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}

@media print {
  @page {
    size: A4;
    margin: 5mm;
    /* Adjust as needed */
  }
  body {
    /* Resetting margins and paddings for print */
    margin: 0;
    padding: 0;
    /* Optional: add box-sizing: border-box; if you add any padding or border */
    box-sizing: border-box;
  }
  /* Optional: add some margin around your divs */
  div {
    margin: 10mm;
    /* Adjust as needed */
    box-sizing: border-box;
    /* To include margins in the element's total width and height */
  }
}
<!doctype html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>My Receipt</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  <div>
    Name : Saad Last Name : Nazir Age : 32 Class : Bsc
  </div>
  <div>
    Name : Saad Last Name : Nazir Age : 32 Class : Bsc
  </div>
</body>

</html>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • Thanks alot but this displaying text in top bottom. Where as I want it at left and right respectively. How can i do that ???? – Mian Omer Jul 12 '23 at 06:07
  • Just use row instead of column. See update – mplungjan Jul 12 '23 at 06:10
  • You are welcome. Please [visit this help page](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) for further instruction – mplungjan Jul 12 '23 at 06:52