Issue with CSS styling of Image positioning and div height expansion - html

Question

I am new to HTML and CSS styling. I need to develop an invoice as per format giving by the client. I have created the invoice,but in most of the places I have used Position = Absolute. If I have to show one product, then it works fine. But if there are multiple products, the product's image and text start to overlap each other and the div in which I am showing the product does not expand neither the footer goes down as per div height expansion.
Here is the template that I have created
I need help to place the products in the div without overlapping each other (div height expansion) and the footer should move downwards as per the height expansion of the div.
Deadline is near and I am really stuck on this issue. Your help will be highly appreciated. Thanks

Answer 1

Try something like this. Note: I didn't incorporate the images that seem to be in the background. And the footer is not styled yet.
body {
margin: 0;
padding: 0.44in;
font-style: normal;
font-weight: 400;
font-size: 9pt;
font-family: Roboto;
color: #333333;
}
.invoice-container {
width: 8.41in;
height: 11.14in;
background-image: url(ci_1.png);
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
justify-content: flex-start;
justify-items: space-around;
}
.invoice-break {
flex-basis: 100%;
}
.invoice-head {
justify-content: center;
line-height: 0.21in;
flex-basis: 100%;
display: flex;
}
.invoice-logo {
width: 0;
margin-left: .15in;
}
.invoice-title {
margin: 0 auto;
font-size: 12pt;
font-weight: 700;
color: #3c3c3c;
}
.invoice-title > div {
font-size: 9pt;
font-weight: 400;
}
.invoice-billing {
line-height: 0.18in;
flex-basis: 100%;
display: flex;
justify-items: flex-start;
margin: .3in .15in 0;
color: #000000;
}
.invoice-billing > * {
flex-grow: 1;
}
.invoice-bill-to {
font-weight: 700;
flex-basis: 2.69in;
}
.invoice-ship-to {
font-weight: 700;
flex-basis: 2.69in;
}
.invoice-detail {
flex-basis: 2.69in;
}
.invoice-order {
flex-basis: 100%;
box-sizing: border-box;
margin: 0.3in 0.15in 0;
}
.invoice-order table {
width: 100%;
}
.invoice-order th {
/* color: #ffffff; */
padding: 0.1in;
}
.invoice-order th.item-desc {
text-align: left;
}
.invoice-order th.item-qty, .invoice-order th.item-price, .invoice-order th.item-total {
text-align: right;
}
.invoice-order td {
vertical-align: center;
padding: 0.1in;
}
.invoice-order td.item-qty, .invoice-order td.item-price, .invoice-order td.item-total {
text-align: right;
}
.product {
display: flex;
}
.product-picture {
margin-right: 0.15in;
}
.product-description {
display: flex;
flex-direction: column;
justify-content: center;
}
.product-title {
font-weight: 700;
}
.invoice-notes {
margin: 0 0.15in;
padding-top: 0.075in;
}
.invoice-notes-title {
font-weight: 700;
}
.invoice-notes-copy {
margin-top: 0.15in;
}
.invoice-shipping-total {
margin-left: auto;
flex-basis: 3in;
margin-right: .15in;
}
.invoice-shipping-total table {
width: 100%;
}
.invoice-shipping-total tr:last-child {
/* color: #ffffff;*/
}
.invoice-shipping-total th {
text-align: left;
padding: .1in;
}
.invoice-shipping-total td {
text-align: right;
padding: .1in;
}
.invoice-footer {
flex-basis: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
<div class="invoice-container">
<div class="invoice-head">
<div class="invoice-logo"><img width="175" height="53" src="ri_1.png"></div>
<div class="invoice-title">
A4Tech Pakistan
<div>
Online Store - Pakistan<br>
www.a4tech.pk<br>
03 111 611 711
</div>
</div>
</div>
<div class="invoice-break"></div>
<div class="invoice-billing">
<div class="invoice-bill-to">
Bill to<br />
Kashif Ali<br />
Alkhidmat Foundation Pakistan<br />
3 km Khayaban e jinnah near Dream Villas<br />
Society Lahore<br />
Lahore<br />
54000<br />
Tel. [phone]
</div>
<div class="invoice-ship-to">
Ship to<br />
Kashif Ali<br />
Alkhidmat Foundation Pakistan<br />
3 km Khayaban e jinnah near Dream Villas<br />
Society Lahore<br />
Lahore<br />
54000<br />
Tel. [phone]
</div>
<div class="invoice-detail">
Invoice No. #1280<br>
<br>
Order Date 03 May, 2019<br>
Payment Cash on delivery (cod)<br>
Shipping
</div>
</div>
<div class="invoice-break"></div>
<div class="invoice-order">
<table>
<thead>
<tr>
<th class="item-desc">Item Description</th>
<th class="item-qty">Qty</th>
<th class="item-price">Price</th>
<th class="item-total">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="item-desc">
<div class="product">
<div class="product-picture"><img src="ri_1.png" width="122" height="105" /></div>
<div class="product-description">
<div class="product-title">H151 Stereo Headset - 1 Year Warranty</div>
<div class="product-item-number">981-000587</div>
</div>
</div>
</td>
<td class="item-qty">× 1</td>
<td class="item-price">Rs.2,399.00 </td>
<td class="item-total">Rs.2,399.00 </td>
</tr>
</tbody>
</table>
</div>
<div class="invoice-break"></div>
<div class="invoice-notes">
<div class="invoice-notes-title">Notes</div>
<div class="invoice-notes-copy">
THIS INVOICE AND PACKING MATERIAL IS MANDATORY FOR<br>
WARRANTY PURPOSE.
</div>
<div class="invoice-notes-serial">SERIAL # 1845ALA89609</div>
</div>
<div class="invoice-shipping-total">
<table>
<tr>
<th>Subtotal</th>
<td>Rs.2,399.00</td>
</tr>
<tr>
<th>Shipping</th>
<td>Rs.0.00</td>
</tr>
<tr>
<th>Total</th>
<td>Rs.2,399.00</td>
</tr>
</table>
</div>
<div class="invoice-break"></div>
<div class="invoice-footer">
<img style="width:0.23in;height:0.23in" src="ri_5.png" />
<img style="width:0.23in;height:0.23in" src="ri_6.png" />
<img style="width:0.23in;height:0.23in" src="ri_7.png" />
<div class="invoice-break"></div>
www.logitech.pk
<div class="invoice-break"></div>
<p>If you have any questions, please do get in contact.</p>
<div class="invoice-break"></div>
info#logitech.pk
<div class="invoice-break"></div>
<p>Thanks for your business!</p>
</div>
</div>

Answer 2

Use some css framework is faster and more convenient. Below is an example for such a quick example -> look bootstrap documentation
.container {
font-size: 12px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container mt-5">
<div class="row">
<div class="col-4"><img src="https://fakeimg.pl/250x100/"></div>
<div class="col-8">
<ul class="list-unstyled">
<li><strong>A4Tech Pakistan</strong></li>
<li>Online Store - Pakistan</li>
<li>www.a4tech.pk</li>
<li>03 111 611 711</li>
</ul>
</div>
</div>
<div class="row my-5">
<div class="col-4">
<b>
Bill to<br>
Kashif Ali<br>
Alkhidmat Foundation Pakistan<br>
3 km Khayaban e jinnah near Dream Villas<br>
Society Lahore<br>
Lahore<br>
54000<br>
Tel. [phone]
</b>
</div>
<div class="col-4">
<b>
Ship to<br>
Kashif Ali<br>
Alkhidmat Foundation Pakistan<br>
3 km Khayaban e jinnah near Dream Villas<br>
Society Lahore<br>
Lahore<br>
54000<br>
Tel. [phone]<br>
</b>
</div>
<div class="col-4">
<b>Invoice No. #1280 Order Date 03 May, 2019 </b><br>
Payment Cash on delivery (cod) <br>
Shipping
</div>
</div>
<div class="row mb-3">
<div class="col-2"><img src="https://fakeimg.pl/130/"></div>
<div class="col-5">H151 Stereo Headset - 1 Year Warranty <br>981-000587</div>
<div class="col-1">x1</div>
<div class="col-2">Rs.2,399.00</div>
<div class="col-2">Rs.2,399.00</div>
</div>
<div class="row mb-3">
<div class="col-2"><img src="https://fakeimg.pl/130/"></div>
<div class="col-5">H151 Stereo Headset - 1 Year Warranty <br>981-000587</div>
<div class="col-1">x1</div>
<div class="col-2">Rs.2,399.00</div>
<div class="col-2">Rs.2,399.00</div>
</div>
<div class="row mb-3">
<div class="col-2"><img src="https://fakeimg.pl/130/"></div>
<div class="col-5">H151 Stereo Headset - 1 Year Warranty <br>981-000587</div>
<div class="col-1">x1</div>
<div class="col-2">Rs.2,399.00</div>
<div class="col-2">Rs.2,399.00</div>
</div>
<div class="row notes">
<div class="col-7">
<p><b>Notes</b></p>
<p>THIS INVOICE AND PACKING MATERIAL IS MANDATORY FOR <br>
WARRANTY PURPOSE. <br>
SERIAL # 1845ALA89609 </p>
</div>
<div class="col-5">
<div class="row">
<div class="col-5">Subtotal</div>
<div class="col-5 text-right">Rs.2,399.00</div>
</div>
<div class="row">
<div class="col-5">Shipping</div>
<div class="col-5 text-right">Rs.0.00</div>
</div>
</div>
</div>
<div class="row justify-content-md-center my-5">
<div class="col-6">
<div class="row justify-content-md-center">
<div class="col-2"><img src="https://fakeimg.pl/50/"></div>
<div class="col-2"><img src="https://fakeimg.pl/50/"></div>
<div class="col-2"><img src="https://fakeimg.pl/50/"></div>
</div>
</div>
</div>
<div class="row justify-content-md-center info text-center">
<p>www.logitech.pk<br>
If you have any questions, please do get in contact. <br>
info#logitech.pk <br>
<b>Thanks for your business!</b><br>
</p>
</div>
</div>