I'm in the process of designing a receipt using HTML and PHP. While I've managed to create the correct layout, I'm facing an issue where I need to rotate my div by 90 degrees. However, when I do this, it seems to overflow to the top. To address this, I had to set margin-top:485px in the code below for the right side table to fit properly at the top.
<div class="rotate">
I want to avoid fixing the margin as the content may fluctuate in length in the future.
MY CODE
.pagebreak {
page-break-after: always;
max-width: 8cm;
word-wrap: break-word;
}
.rotate {
-webkit-transform: rotate(-90deg) translate3d(0, 0, 0);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="pagebreak">
<div class="rotate">
<label class="font-weight-bold text-center">SOME TITLE</label>
<table class="table">
<thead class="thead">
<tr colspan="3" class="">
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<div>
<label class="font-weight-bold" style="font-size:24px;">Seat No :
D6 </label>
</div>
<div id="label0" class="font-weight-bold" style="display:inline-block;" title="2BDA5339-3DAC-48DD-C1C2-8AA7D327A666"><canvas width="75" height="75" style=&...
[<script omitted>]
</td>
<td class="text-nowrap">
<div><label class="font-weight-bold">Counter ID : PN001</label></div>
<div><label class="font-weight-bold">Ticket ID : 7</label></div>
....
</td>
<td class="text-nowrap">
....
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>Current output : The picture is cut in half
https://i.sstatic.net/49fjC.png
Expected output after rotating div: