Manikumar Perla Manikumar Perla - 1 month ago 5x
CSS Question

Moving two divs to the center where one is a clone of another

I am trying to move two divs to the center of the page. The right div is a clone of left div (The images of left div are cloned into right div). When I am trying to move the left div using the 'left:100px' the right is getting distorted. How can I move the two divs to the center. Kindly look at some of the lines of my cod below.

var theRightSide= document.getElementById('rightside');
var leftimages= theLeftSide.cloneNode(true);

div {width: 600px; height: 600px}
#leftside {position: absolute;border: 3px solid black; background-color: lightYellow}
#rightside {position: absolute;left:600px;background-color: lightYellow}

<div id="leftside"></div>
<div id="rightside"></div>


Try using display: inline-block;

A very simple example to explain how it works-

.outer-box {
position: absolute;
left: 17%;
.box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid;
<div class="outer-box">
<div class="box">Box 1</div>
<div class="box">Box 2</div>