I have three elements: checkout-left, checkout-right, and product-2
<div class="order-form">
<div class="checkout-left">
<div class="video another-video">
<div class="video-wrapper second-video">
<video class="video-js vjs-default-skin" controls preload="auto" width="221" height="169">
<source src="magnet.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<img src="http://magnaboss.com/wp-content/themes/twentyfifteen/images/checkout-right.jpg" style="float: right;" />
<img src="http://magnaboss.com/wp-content/themes/twentyfifteen/images/product-2.png" class="product-2" />
<div style="clear:both;"></div>
</div>
My goal is to make the element product-2 overlap checkout-left and checkout-right perfectly centered without using position:absolute
Below is the provided CSS code:
img.product-2
{
-ms-transform: rotate(-12deg); /* IE 9 */
-webkit-transform: rotate(-12deg); /* Chrome, Safari, Opera */
transform: rotate(-12deg);
width: 200px;
}
.order-form {
background-color: #FFF;
max-width: 900px;
width: 100%;
border-bottom: 2px solid #000;
}
.checkout-left {
background: url(http://magnaboss.com/wp-content/themes/twentyfifteen/images/checkout-left.jpg);
width: 450px;
height: 380px;
float: left;
border-right: 2px solid #000;
}