Can not place 2 tables side-to-side - html

Question

I'm fairly new to HTML so please bear with me. I'm trying to create a printable invoice in html. I'm having an issue with placing the top 2 tables side by side. Despite using inline-block, the tables are not being stacked next to each other
What am I doing wrong? Any help or suggestion would be greatly appreciated!
body {
padding: 1%;
padding-top: 3%;
font-family: Arial, Arial Black;
font-size: small;
}
.RetailerLogo {
position: absolute;
top: 0px;
width: 250px;
}
.RetailerLogo img {
width: 100%;
}
.RetailerOrderData {
position: absolute;
top: 20px;
right: 20px;
font-size: small;
}
.PageTitle {
font-family: Arial Black, Arial;
font-size: x-large;
border-bottom: 5px;
}
table thead {
font-family: Arial Black, Arial;
background: Pink;
color: Red;
height: 15px;
}
table thead td {
border-bottom: solid thin black;
}
table.Info {
width: 50%;
margin-bottom: 20px;
margin-right: 2%;
border-style: solid;
border-width: thin;
border-color: Red;
}
table.Info tbody td {
font-family: Arial;
height: 60px;
padding-top: -3px;
}
table.Contents {
width: 99%;
display: block;
text-align: center;
border-style: solid;
border-width: thin;
border-color: Black;
font-family: Arial;
font-size: small;
}
table.Contents tbody {
border-style: solid;
border-width: thin;
border-color: Black;
}
table.Contents tbody td {
padding-top: 0px;
margin-bottom: -5px;
}
table.Contents tbody tr {
padding-top: 0px;
margin-bottom: -5px;
}
<div class="RetailerLogo">
<img class="RetailerLogo" src="filepath" alt="Retailer Logo" />
</div>
<BR>
<BR>
<BR>
<BR>
<center>
<div class="PageTitle">Package Summary</div>
</center>
<BR>
<BR>
<BR>
<BR>
<BR>
<div class="RetailerOrderData">
<span style="FONT-SIZE: 10pt; FONT-FAMILY: AdvC39c; FONT-SIZE: 12pt; font-stretch:expanded;">
*%RETAILERORDERNUMBER%*
</span><br /> Order #: %RETAILERORDERNUMBER%<br /> Order Date: %RETAILERORDERDATE%<br /> Ship Method: %SHIPPINGMETHOD%<br/>
</div>
<table border="0" class="Info ShippingReturn">
<thead>
<tr>
<td>
Contact Info: Company Name
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGRETURNADDRESS%<br/> Email: orders#gifpop.io
</td>
</tr>
</table>
<table class="Info ShipTo">
<thead>
<tr>
<td>
Shipped to: %CUSTOMERNAME%
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGADDRESS%
</td>
</tr>
</table>
<table class="Contents">
<thead>
<tr>
<td width="125"><b>Image</b></td>
<td width="75"><b>Qty</b></td>
<td width="150"><b>Code</b></td>
<td width="320"><b>Description</b></td>
</tr>
</thead>
%SHIPMENTDETAILWITHIMAGE%
<tr>
<td width="125"> </td>
<td width="75"> </td>
<td width="150"> </td>
<td width="320"> </td>
</tr>
</table>
<b>
<b>
<b>

Answer 1

check out this hope this would work..capsule tables inside div and adjust using float property hope it would solve ur issue..
.floatLeft { width: 50%; float: left; }
.floatRight {width: 50%; float: right; }
.container { overflow: hidden; }
body {
padding: 1%;
padding-top: 3%;
font-family: Arial, Arial Black;
font-size: small;
}
.RetailerLogo {
position: absolute;
top: 0px;
width: 250px;
}
.RetailerLogo img {
width: 100%;
}
.RetailerOrderData {
position: absolute;
top: 20px;
right: 20px;
font-size: small;
}
.PageTitle {
font-family: Arial Black, Arial;
font-size: x-large;
border-bottom: 5px;
}
table thead {
font-family: Arial Black, Arial;
background: Pink;
color: Red;
height: 15px;
}
table thead td {
border-bottom: solid thin black;
}
table.Info {
width: 50%;
margin-bottom: 20px;
margin-right: 2%;
border-style: solid;
border-width: thin;
border-color: Red;
}
table.Info tbody td {
font-family: Arial;
height: 60px;
padding-top: -3px;
}
table.Contents {
width: 99%;
display: block;
text-align: center;
border-style: solid;
border-width: thin;
border-color: Black;
font-family: Arial;
font-size: small;
}
table.Contents tbody {
border-style: solid;
border-width: thin;
border-color: Black;
}
table.Contents tbody td {
padding-top: 0px;
margin-bottom: -5px;
}
table.Contents tbody tr {
padding-top: 0px;
margin-bottom: -5px;
}
<div class="RetailerLogo">
<img class="RetailerLogo" src="filepath" alt="Retailer Logo" />
</div>
<BR>
<BR>
<BR>
<BR>
<center>
<div class="PageTitle">Package Summary</div>
</center>
<BR>
<BR>
<BR>
<BR>
<BR>
<div class="RetailerOrderData">
<span style="FONT-SIZE: 10pt; FONT-FAMILY: AdvC39c; FONT-SIZE: 12pt; font-stretch:expanded;">
*%RETAILERORDERNUMBER%*
</span><br /> Order #: %RETAILERORDERNUMBER%<br /> Order Date: %RETAILERORDERDATE%<br /> Ship Method: %SHIPPINGMETHOD%<br/>
</div>
<div class="container">
<div class="floatLeft">
<table border="0" class="Info ShippingReturn">
<thead>
<tr>
<td>
Contact Info: Company Name
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGRETURNADDRESS%<br/> Email: orders#gifpop.io
</td>
</tr>
</table>
</div>
<div class="floatRight">
<table class="Info ShipTo">
<thead>
<tr>
<td>
Shipped to: %CUSTOMERNAME%
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGADDRESS%
</td>
</tr>
</table></div>
</div>
<table class="Contents">
<thead>
<tr>
<td width="125"><b>Image</b></td>
<td width="75"><b>Qty</b></td>
<td width="150"><b>Code</b></td>
<td width="320"><b>Description</b></td>
</tr>
</thead>
%SHIPMENTDETAILWITHIMAGE%
<tr>
<td width="125"> </td>
<td width="75"> </td>
<td width="150"> </td>
<td width="320"> </td>
</tr>
</table>
<b>
<b>
<b>
i used ur code and mould it little like wrapping tables inside div and add css accordingly

Answer 2

The easiest : You can turn those 2 tables into table-cell, so they'll stick together side by side (demo below),
else: you'll need to float them or a wrapper to hold them and some extra CSS to keep them side by side no matter what the width avalaible. (possibly inline-block along white-space )
.Info {
display:table-cell;
}
body {
padding: 1%;
padding-top: 3%;
font-family: Arial, Arial Black;
font-size: small;
}
.RetailerLogo {
position: absolute;
top: 0px;
width: 250px;
}
.RetailerLogo img {
width: 100%;
}
.RetailerOrderData {
position: absolute;
top: 20px;
right: 20px;
font-size: small;
}
.PageTitle {
font-family: Arial Black, Arial;
font-size: x-large;
border-bottom: 5px;
}
table thead {
font-family: Arial Black, Arial;
background: Pink;
color: Red;
height: 15px;
}
table thead td {
border-bottom: solid thin black;
}
table.Info {
width: 50%;
margin-bottom: 20px;
margin-right: 2%;
border-style: solid;
border-width: thin;
border-color: Red;
}
table.Info tbody td {
font-family: Arial;
height: 60px;
padding-top: -3px;
}
table.Contents {
width: 99%;
/*display: block;*/
text-align: center;
border-style: solid;
border-width: thin;
border-color: Black;
font-family: Arial;
font-size: small;
}
table.Contents tbody {
border-style: solid;
border-width: thin;
border-color: Black;
}
table.Contents tbody td {
padding-top: 0px;
margin-bottom: -5px;
}
table.Contents tbody tr {
padding-top: 0px;
margin-bottom: -5px;
}
<div class="RetailerLogo">
<img class="RetailerLogo" src="filepath" alt="Retailer Logo" />
</div>
<BR>
<BR>
<BR>
<BR>
<center>
<div class="PageTitle">Package Summary</div>
</center>
<BR>
<BR>
<BR>
<BR>
<BR>
<div class="RetailerOrderData">
<span style="FONT-SIZE: 10pt; FONT-FAMILY: AdvC39c; FONT-SIZE: 12pt; font-stretch:expanded;">
*%RETAILERORDERNUMBER%*
</span><br /> Order #: %RETAILERORDERNUMBER%<br /> Order Date: %RETAILERORDERDATE%<br /> Ship Method: %SHIPPINGMETHOD%<br/>
</div>
<table border="0" class="Info ShippingReturn">
<thead>
<tr>
<td>
Contact Info: Company Name
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGRETURNADDRESS%<br/> Email: orders#gifpop.io
</td>
</tr>
</table>
<table class="Info ShipTo">
<thead>
<tr>
<td>
Shipped to: %CUSTOMERNAME%
</td>
</tr>
</thead>
<tr>
<td>
%SHIPPINGADDRESS%
</td>
</tr>
</table>
<table class="Contents">
<thead>
<tr>
<td width="125"><b>Image</b></td>
<td width="75"><b>Qty</b></td>
<td width="150"><b>Code</b></td>
<td width="320"><b>Description</b></td>
</tr>
</thead>
%SHIPMENTDETAILWITHIMAGE%
<tr>
<td width="125"> </td>
<td width="75"> </td>
<td width="150"> </td>
<td width="320"> </td>
</tr>
</table>
<b>
<b>
<b>

Answer 3

Try implementing the declaration display: grid to build your tables side-by-side. The grid value offers fully responsive 'boxes' that can be stacked as you wish.
This is a simple layout~
HTML
<section class="tableGrid">
<div>
<div>
<p>Row 1 - Table 1</p>
</div>
<div>
<p>Row 2 - Table 1</p>
</div>
</div>
<!-- ********************** -->
<div>
<div>
<p>Row 1 - Table 2</p>
</div>
<div>
<p>Row 2 - Table 2</p>
</div>
</div>
</section>
and CSS
.tableGrid {
margin: 4vh 8vw;
padding: 16px;
display: grid;
grid-template-rows: auto;
grid-gap: 16px;
}
.table {
border: 4px dotted red;
}
#media (min-width: 800px) {
.tableGrid {
margin: 8vh 16vw;
padding: 32px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(auto-fit: minmax(88px 1fr);
grid-gap: 24px;
}
}
Check out this pen and if you like what you see learn more about using grid here.