Как сделать ширину моей обертки CSS относительно размера монитора?

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

Вот мой код:

#wrapper {
 background-color: #000;
 width: 800px;
 margin-right: auto;
 margin-left: auto;
 border-right-width: 1px;
 border-left-width: 1px;
 border-right-style: solid;
 border-left-style: solid;
}
#wrapper #logo {
 height: 292px;
 margin-right: auto;
 margin-left: auto;
 position: relative;
 display: block;
 margin: 0 auto;
}

Очевидно, что логотип центрируется только на экранах с шириной браузера 800. Таким образом, на моем мониторе ширины 1024 он отклоняется влево.

Кто-нибудь знает, что мне нужно сделать?

Спасибо!

EDIT: все еще не центрируется с помощью этого кода:

http://jsfiddle.net/mFj3W/

любые идеи?

1 ответ

Возможно, вы захотите присвоить проценту ширине, а не фиксированную ширину пикселя.

http://jsfiddle.net/FKQFX/

licensed under cc by-sa 3.0 with attribution.