Flexible box
HTML
<div class="box-parent">
<div class="box">
<div class="m">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtxPyT0WhSzK-rdmz7iPjMHD1JHqxFu9Oo3CGtFuAPXwwWDKwn" alt="" />
</div>
<div class="n">
<img src="http://wfiles.brothersoft.com/c/cat-photograph_195928-800x600.jpg" alt="" />
</div>
</div>
<div style="vertical-align: middle; display: table; text-align: center;">
<center>
<h1>DEALER NAME</h1>
<h1>BOOK TITLE</h1>
</center>
</div>
<div class="footer">
<div class="bottom-left">
<h2> Book Type</h2>
<div>Date Today</div>
</div>
<div class="bottom-right">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtxPyT0WhSzK-rdmz7iPjMHD1JHqxFu9Oo3CGtFuAPXwwWDKwn" alt="" />
<p>
Fabricator Branch
</p>
<div>
Serial Number
</div>
</div>
</div>
</div>
CSS
body {height:100%}
.box-parent {
height: 80%;
width: 100%;
background: pink;
vertical-align: middle;
text-align: center;
}
.box {
display: table;
width: 92%;
height: 60%;
background: red;
}
.box-bottom {
display: table;
width: 92%;
height: 20%;
background: red;
}
.footer {
display: table;
width: 95%;
height: 20%;
background: violet;
position: absolute;
}
.h, .m, .b, .n {
display: table-row;
}
.h {
background: yellow;
height: 0;
}
.m {
background: green;
}
.m img {
max-width: 100%;
height: auto;
margin: 0 auto;
display: block;
}
.n {
background: orange;
}
.n img {
max-width: 100%;
height: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.b {
background: blue;
height: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.bottom-left {
float: left;
bottom: 0;
left: 0;
position: absolute;
}
.bottom-right {
float: right;
text-align: right;
margin-top: 10mm;
margin-right: 10mm;
}