Aligned Divs with no element cut on PRINT
HTML
<body>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
</div>
<div class="container-holder">
</div>
</body>
CSS
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.container-holder {
width: 800px;
background: pink;
padding: 3px;
border: 3px solid green;
page-break-inside: avoid;
display: block;
}
.container-row {
border: 3px solid blue;
margin: 3px;
page-break-inside: avoid;
}
.container {
border: 1px solid black;
width: 44%;
height: 300px;
margin: 10px;
padding: 10px;
display : inline-block;
vertical-align: bottom;
}
.container img {
max-width: 200px;
max-height: 200px;
}