Как получить div для автоматического изменения размера по горизонтали для каждого размера экрана/разрешения?

Question

У меня возникли проблемы с получением серой коробки на моей странице, https://com-bb-dev.com.edu, чтобы автоматически изменять размер до ширины границ на двух боксах, расположенных над ним на каждом разрешении. На 1440x900 это выглядит нормально, или как я хочу, чтобы он искал каждого пользователя, однако я использую мой второй монитор здесь с другим разрешением для проверки таких проблем.

Вот что я пытался до сих пор:

#loginText { 
padding: 12px 80px 18px 80px; 
background: #5f6062; 
display: inline-block; 
width: 912px; 
border-top: 6px solid #DADADA; 
margin-left: 10.6%; 
text-align: center; 
} 

По умолчанию этот ДИВ не отображается в качестве строкового блока. Его весь контейнер по какой-либо причине занимает всю ширину экрана (по умолчанию, насколько я знаю). Спасибо.

Answer 1

Вам необходимо внести следующие изменения в #loginText CSS:

Remove padding-right: 80px; 
Remove padding-left: 80px; 
Change margin-right: auto; 
Change margin-left: auto; 
Add width: 1072px; 

Ваш вопрос в том, что ваши края были процент на основе, которая масштабируется на всех разрешениях. Ваш бокс выше - это абсолютный размер (1072px); это должно привести к тому, что он будет соответствовать и центрировать его.

Answer 2

Думаю, я понимаю, что вы пытаетесь спросить. Причина, по которой ширина серого окна не всегда совпадает с шириной окна с двумя выше, состоит в том, что в то время как верхние поля имеют заданную ширину, серый квадрат изменяется с шириной окна браузера (поскольку он имеет процентный запас с обеих сторон).

Изменить ваше определение стиля к этому:

#loginText { 
    background: none repeat scroll 0 0 #5F6062; 
    border-top: 6px solid #DADADA; 
    margin: 0 auto; 
    padding: 12px 0; 
    text-align: center; 
    width: 1072px; 
} 

И я считаю, что дает вам поведение вы ищете. Если это не то, что вы искали, сообщите мне, и я буду рад помочь вам. Удачи!