Центрирование DIV в разном разрешении

Question

У меня есть DIV с атрибутами ржали:

.videosHolder { 
width:970px; 
padding:5px; 
float:left; 
} 

теперь у меня есть еще один DIV с атрибутами:

.rightbar{ 
    width:222px; 
    padding-bottom:10px; 
    float:right; 
    margin-top:10px; 
    margin-right: 10px; 
} 

Так мой первый плавающая: левый и его нормально, второй плавает вправо, но я хочу сосредоточить его после пространства .videosHolder, что это пространство зависит от разрешения экрана. И я имею в виду, если мое разрешение экрана 1300 пикселей, а первый div имеет 970px, тогда я должен центрировать второй div в пространстве 330 пикселей. Так 330px - 222px = 108px, но это пространство в 108px будет другим числом, если мое разрешение 1600px.

Спасибо!

Answer 1

Вы могли бы сделать что-то вроде этого

HTML:

<div id="right"> 
    <div id="right-center"> 
     test test 
    </div> 
</div> 

<div id="left"> 
    test test 
</div> 

CSS:

#left 
{ 
    width: 100px; /* You can change this to 970px */ 
    background-color: red; 
} 

#right 
{ 
    position: absolute; 
    left: 100px; /* You can change this to 970px */ 
    right: 0; 

} 

#right-center 
{ 
    margin: 0 auto; 
    width: 80px; /* You can change this to 222px */ 
    background-color: blue; 
} 

в действии: http://jsfiddle.net/8QYfa/3/

Answer 2

добавить div с классом rightbar-inner внутри вашего rightbar, придать ему ширину и центр, что div.

Затем только плавайте свой div с классом videosHolder. и установить margin-right в rightbar DIV, равным width в videosHolder (если вы используете компилятор, как LESS или SASS вы можете сохранить ширину в переменной и использовать, чтобы установить ширину и запас направо)

См. Этот пример. Я сделал ширину div меньше, поэтому ее легче протестировать. если вы изменяете размер (не браузер, а veritcal line в середине страницы), вы можете видеть, что правая панель изменяет размер, а правая панель - внутри центра.

http://jsfiddle.net/gwHC2/1/