Center an element over two other elements using CSS

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;
}

Answer №1

To enhance the appearance of product-2, consider applying a negative margin-left and positive translateX.

img.product-2
{
    -ms-transform: rotate(-12deg) translateX(100px); /* IE 9 */
    -webkit-transform: rotate(-12deg) translateX(100px); /* Chrome, Safari, Opera */
    transform: rotate(-12deg) translateX(100px);
    width: 200px;
    margin-left: -200px;
}

=================================================

UPDATE: An alternative technique is as follows:

Exclude float:right from checkout-right

<img src="http://magnaboss.com/wp-content/themes/twentyfifteen/images/checkout-right.jpg" />

Then adjust product-2 in the following way:

img.product-2
{
    -ms-transform: rotate(-12deg); /* IE 9 */
    -webkit-transform: rotate(-12deg); /* Chrome, Safari, Opera */
    transform: rotate(-12deg);
    width: 200px;
    /* Include these lines */
    margin-top: -385px; /* Modify if needed */
    margin-left: 350px; /* Modify if needed */
    float: left;
}

Lastly, add white-space: nowrap to the .order-form container

.order-form {
        background-color: #FFF;
        max-width: 900px;
        width: 100%;
        border-bottom: 2px solid #000;
        /* This setting avoids checkout-right from shifting down */
        white-space: nowrap;
}

For a demonstration, visit the live example at: http://codepen.io/wilman/pen/xZowgG

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Instructions for creating a Google Maps overlay that hovers above the zoom bar

Let me share my workaround for creating an overlay and dealing with z-index issues when using Google Maps API. The problem arises when dragging the map and the overlay ends up behind control elements like the zoom bar. No matter how much I adjust the z-ind ...

Expand the <canvas> element to completely fill the flex item without any scrollbars

I am currently utilizing Bootstrap 5 and experimenting with setting up a nested flex layout that occupies the entire window. One of the flex items should be filled by a "stretchy" canvas element, ensuring there are no scrollbars present. However, when I a ...

Incorporate an image into a hyperlink using CSS

I am trying to enhance my URLs by adding the same image to each of them. The code I have currently is as follows: a.linkArrow { background: transparent url('../images/abc.png') no-repeat center right; padding-right: 60px; } Here is an ...

Encountering an Uncaught TypeError that is hindering an alert for the score, but I am uncertain about the solution despite the game functioning properly

My Yahtzee code is functioning normally during gameplay, but I'm facing issues with getting alerts for the total score and bonus points. I have identified where the problem lies but I am unsure how to resolve it. I attempted debugging through alerts, ...

HTML double for-loop

While working on my website's HTML file, I encountered a challenge with nested for-loops. The first loop successfully checks the user's account and displays the corresponding data, and the second loop filters data starting with "Title:" and displ ...

What is the process for modifying two IDs simultaneously?

I'm struggling to include more than one ID in my CSS. I want the box border to have four different hover effects and three gradient buttons (e.g., play, pictures, etc.). Here is my HTML: <h2><a id="hover-1" href="">Hov ...

Unable to access account: HTML Javascript login issue

Problem with Login Code As a newcomer to HTML, CSS, and almost unknown in Javascript, I sought help from others to create a login code. The code was working fine earlier, but now it's not functioning as expected. Despite checking everything, I can&ap ...

Understanding CSS classes in ReactJS Material UI componentsJust wanted to clarify some things

When it comes to styling Material UI components, the recommended approach is to utilize their useStyles function. Here's an example: const useStyles = makeStyles(theme => ({ root: { marginTop: '15px', display: 'f ...

Using the following-sibling selector in Java, you can easily click on all <li> elements within a <ul> tag

I am trying to navigate through the list of li elements starting from the "Mentorship" tag link <ul _ngcontent-cwp-c18="" class="navigation clearfix"> <li _ngcontent-cwp-c18="" routerlinkactive="current" ...

What is the best way to align the elements to the beginning and place the flexbox container in the center

I posted this plunker instead of the previous one. My goal is to align the flex container horizontally while keeping its items aligned at the start. I want to use align-content: flex-start along with justify-content: center. Currently, if the last row h ...

What is the best way to position a button directly to the right of a text box with no space in

Is there a way to perfectly align a submit button to the right of a text or search box, matching the height of the search box, and eliminating any unwanted white space between them? This is my current setup: <input type="text" value="" placehold ...

HTML/Angular tutorial: Sharing an On-Click value with a different HTML element within the same component

As a newcomer to this, I could really use some guidance. Currently, I have a Mat Table that is displaying a specific range of data from my firestore. My goal is to be able to click on a particular row and have its data appear in a list below the table. I ...

Trouble with Contact Form: PHP failing to display INPUTs

I've been grappling with this issue for a few days now, scouring through countless questions and tutorials. The Contact Form on my website seems to be working—it submits, confirms, and redirects as expected. However, there's one major problem: ...

Tips for adjusting the width of a table

add your image description hereImagine a scenario where there is a table featuring two columns. <table> <tr><td>Email</td> <td></td></tr> <tr><td>Full name</td> <td></td></tr> ...

Utilizing Vue's string-based class binding feature?

Can Vue class binding work with strings? For example: <div :class={open: target == 'myString'}></div> var app = new Vue({ target: null }) It works when I don't use quotes <div :class={open: target == myString}></div ...

A div element set to a width of 100% that holds a lengthy text will expand to the entire width of the window,

Check out this simple webpage: https://jsfiddle.net/enxgz2Lm/1/ The webpage is structured with a side menu and a tasks container. Within the tasks container, there is a row container that includes a checkbox, title on the left, and details on the right. ...

HTML embedded content is not appearing on the React webpage

I'm attempting to incorporate GoFundMe donation buttons into a React page, but unfortunately, they aren't displaying on the screen. const Donation = () => { return ( <div> <div className="gfm-embed" d ...

Transforming a Microsoft Word document containing images into HTML code

Looking for a solution to extract images from a Word document, save them to a folder, re-link them back into the document and then convert it to HTML for uploading to our intranet site. Any suggestions on how this can be achieved? ...

concise stylus CSS selector

Is there a way to condense these stylus selectors for a cleaner look? #map > div.mapboxgl-control-container > div.mapboxgl-ctrl-top-left > div:nth-child(1) > button #map > div.mapboxgl-control-container > div.mapboxgl-ctrl-top-left > ...

The functionality of the controls is not functioning properly when attempting to play a video after clicking on an image in HTML5

While working with two HTML5 videos, I encountered an issue with the play/pause functionality. Despite writing Javascript code to control this, clicking on one video's poster sometimes results in the other video playing instead. This inconsistency is ...