How to add a div tag next to another centered div tag?

Question

I have a big div tag which is vertically and horizontally centered. not I would add another div tag next to it. The first tag must not change its position, only the second tag must stay like 50px away of it. Here is the image: http://i40.tinypic.com/fk4ehh.jpg

This is my code for both divs:

 .main-content{
    width:800px;
    height:400px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-225px 0 0 -400px; 
    background:#0A7072;
}
.next-slide{
    width:50px;
    height:100px;

    background:#8F1ABB;
}

HTML:

<div class="main-content">TEXT</div>
<div class="next-slide">NEXT</div> 

As you can see in the picture, the main big tag is in the center and the small tag is next to it, whatever the page width it is, so maybe the location of the small tag must be relative to the big one. So they never overlap and the position of the first tag never changes from center.

Any idea how to do it?

Answer 1

First make a container div and center it

css

.container {
    width:800px;
    height:400px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-225px 0 0 -400px; 
}

html

<div class="container">
    <div class="main-content">TEXT</div>
    <div class="next-slide">NEXT</div> 
</div>

then make your .main-content float left and give your .next-slide a position:absolute and position it wherever you want. It will always follow your '.container'

Answer 2

You want to put your next-slide div inside and position it absolutely, like so;

 .main-content{
    width:800px;
    height:400px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-225px 0 0 -400px; 
    background:#0A7072;
}
.next-slide{
    width:50px;
    height:100px;
    background:#8F1ABB;

    position: absolute;
    left: 50px;
}

<div class="main-content">
    TEXT
    <div class="next-slide">NEXT</div> 
</div>