How do you put 2 or move divs next to one another?

Absolute makes <divs> or any element float. Hence they stack on-top of each other.

Relative or static positions(static is the default position, so if you do not define a position HTML assumes it's static) does not make elements float. Hence they will not stack on-top of each other.

If you want to make the <div> beside each other, you need to use display:inline-block and position:relative. Use display inline-block if you want the <div> below the other <div>.

Use this code on jsfiddle, and you'll understand what I mean.

<div class ="box1"> </div> 
<div class ="box1"> </div> 

.box1{
width: 100px;
height: 100px;
display: inline-block; /* Change this to block and see what happens */
background:blue;
position:relative;
}

Moderator Edited: Added missing closing double-quote in class assignment

Or you can make it flow (right or left) and share some styles - position, width. For example

<div class="box one"></div>
<div class="box two"></div>

.box { position: relative; width: 250px; float: left; }
.one { border: 1px solid #ccc; background: #ebebeb; }
.two { border: 5px dotted #bbb; background: #acacac; }

Yes. You absolutely rite. And especially be carefully about beneath elements without float and without clear:both; But, just as example of css it's maybe helpful.

Thanks for your help. Now I figured out how to put two divs next to each other I am finding they are not lineing up evenly. I have been trying to adjust the margin but still I cannot get them level. What is wrong with my code to not make each shape level? Also I find if I edit the blue box the white box is also moves. Why can I not move one without the other moving too? I have attached my code bellow- HTML <div class="whitebox1">IGBODYBUILDINGWORLD <span class="igbodybuildingworld">SELECT</span> <img class="img-circle1" src="igbodybuildingworld.jpg"> <span class="bluebox1">bluebox</span> </div>

<div class="whitebox2">ABSMOTIVATION101 <span class="absmotivation101">SELECT</span> <img class="img-circle2" src="absmotivation101.jpg"> <span class="bluebox2">bluebox</span> </div>

CSS .whitebox1 { border: solid 1px; width: 250px; height: 550px; z-index: 1; background: white; margin: 5px 5px 10px 70px; display: inline-block; position:relative;

}

.bluebox1 {

z-index: 2; /* put .green-box above .dashed-box */ background: #847bf7; width: 250px; left: 5%; top: 87px; margin: 200px 10px 10px -12px; height: 300px; opacity: 0.9; display: inline-block; position:relative;

}

.igbodybuildingworld{
z-index: 3; /* select button */ background: #847bf7; border: solid 1px; width: 200px; left: 35px; top: 480px; height: 50px; font-size: 22px; font-weight: bold; display: inline-block; position:relative; }

.img-circle1 { border-radius: 50%; border:5px solid grey; width:150px; margin: 200px 10px 10px 0px; }

.whitebox2 { border: solid 1px; width: 250px; height: 550px; z-index: 4; background: white; margin: 5px 5px 10px 70px; display: inline-block; position:relative;

}

.bluebox2 {

z-index: 5; /* put .green-box above .dashed-box */ background: #847bf7; width: 250px; left: 5%; top: 87px; margin: 100px 10px 10px -12px; height: 300px; opacity: 0.9; display: inline-block; position:relative;

}

.absmotivation101{
z-index: 6; /* select button */ background: #847bf7; border: solid 1px; width: 200px; left: 35px; top: 480px; height: 50px; font-size: 22px; font-weight: bold; display: inline-block; position:relative; }

.img-circle2 { border-radius: 50%; border:5px solid grey; width:150px; margin: 200px 10px 10px 0px; }

If i understand rite, you don't need so much css coding. It could be much simpler. For example.

<!-- wrapper -->
<div class="wrapper">

    <!-- white boxes -->

    <!-- box -->
    <div class="box white_box">
        <span>IGBODYBUILDINGWORLD</span>
        <div class="image_holder"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" alt="smile"> </div>
        <button>SELECT</button>
    </div>
    <!-- box -->

    <!-- box -->
    <div class="box white_box">
        <span>ABSMOTIVATION101</span>
        <div class="image_holder"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" alt="smile"> </div>
        <button>SELECT</button>
    </div>
    <!-- box -->

    <!-- blue boxes -->

    <!-- box -->
    <div class="box blue_box">
        <span>Bluebox</span>
    </div>
    <!-- box -->

    <!-- box -->
    <div class="box blue_box">
        <span>Bluebox</span>
    </div>
    <!-- box -->

</div>
<!-- wrapper -->

/*padding and borders compensation*/
div{ box-sizing: border-box; }
/*add wrraper for control blocks flow*/
.wrapper{ 
    position: relative; 
    width: 550px; 
    margin: 0 auto; 
    text-align: center; 
}
    /*add shared styles for all boxes*/
    .box{ 
        position: relative; 
        width: 250px; 
        margin: 0 7px 15px 7px; 
        padding: 25px; 
        text-align: center; 
        background: #fff; 
        display: inline-block; 
        vertical-align: top; 
    }
    /*add styles only for white boxes*/
    .white_box{ 
        height: 550px; 
        border: 1px solid #000; 
    }
        /*image holder*/
        .image_holder{ 
            position: relative; 
            width: 150px; 
            height: 150px; 
            margin: 150px 0 0 0; 
            border: 5px solid #ccc; 
            border-radius: 75px; 
            display: inline-block; 
            overflow: hidden; 
        }
            .image_holder img{ width: 100%; }
    /*add styles only for blue boxes*/
    .blue_box{ 
        height: 300px; 
        background: #847bf7; 
    }
    /*add styles for button*/
    button{ 
        position: absolute;
        width: 200px; margin: 0 0 0 -100px; 
        left: 50%; bottom: 25px; 
        background: #847bf7; 
        border: solid 1px; 
        font-size: 36px; 
    }

Thanks for your reply. I used the outline Yevgeniy used. I made a few changes and I cant figure out how to have the third div next to the others. Right now I have the two images and the next two fall under the first two not next to one another. What am I doing wrong? I have attached mt code below. Thanks in advance http://codepen.io/Johned22/pen/vKzAyd

Also I am having trouble on how to add additional text to each box. Do I do it by using the <p> tags? I want to have the text lined up something similar to the text in the boxes on this website? http://www.shreddedacademy.com/instagram Thanks in advance