Как добавить тег div рядом с другим центральным тегом div?

Question

У меня есть большой тег div, который по вертикали и по горизонтали. не я добавил бы еще один тег div рядом с ним. Первый тег не должен менять свое положение, только второй тег должен оставаться на расстоянии 50 пикселей от него. Вот изображение: http://i40.tinypic.com/fk4ehh.jpg

Это мой код для обоих дивы:

.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> 

Как вы можете видеть на картинке, основной большой тег в центр и небольшой тег рядом с ним, независимо от ширины страницы, поэтому, возможно, расположение маленького тега должно быть относительно большого. Поэтому они никогда не пересекаются, и положение первого тега никогда не меняется из центра.

Любая идея, как это сделать?

Answer 1

Сначала сделайте контейнер DIV и центрировать его

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> 

затем сделать ваш .main-content поплавка слева и дайте .next-slide эту позицию position:absolute и где угодно. Он всегда будет следовать за вашим «.container»

Answer 2

Вы хотите поместить свой следующий слайд div внутрь и поместить его абсолютно так:

.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>