Изображение перекрывает текст при изменении размера браузера

Question

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

Я могу это сделать, но когда я изменяю размер окна браузера, изображение всегда хочет совместить текст заголовка перед изменением размера. Если я удаляю поля, которые я использовал для размещения изображения, тогда изображение находится под текстом заголовка (и справа), а не справа от него, но я чувствую, что удаление этого (при сохранении позиционирования) может быть ключ. Мне нужно, чтобы изображение было перекрыто некоторыми другими элементами.

Вот отрывок из моего кода для изображения:

img#site-logo { 
    max-width: 100%; 
    height: auto; 
    clear: both; 
    position: relative; 
    z-index: 0; 
    margin: -12.87em 2em -16em 0px; 
} 

И название сайта:

#site-title a { 
    font-size: 4.875em; 
    font-weight: bold; 
    line-height: 78px; 
    padding: 0px; 
    margin-right: auto; 
    white-space: nowrap; 
    z-index: 2; 
    position: relative; 
} 

сайт жить здесь:

http://dominicpalma.com/

Answer 1

Есть конечно, несколько разных подходов к решению вашей проблемы. Но в моих глазах это было бы лучшим решением для установки min-width для вашего элемента #page.

#page{ 
    min-width:900px; 
} 

Я играл немного вокруг с шириной и думаю min-width 900 пикс лучше подходит в вашем случае.