How to I make the width of my CSS wrapper relative to the size of the monitor?

I am trying to center a logo at the top of my HTML page using CSS. I created a wrapper, but instead of fixing a width, is there a way I can make the width relative to screen size? If i assign the width to anything other than a fixed pixel, my image hugs the left of the screen (and will look funky on other screens).

Here is my code:

#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;
}

Obviously, the logo is centered only on screens whose browser has a width of 800. So in my 1024 width monitor, it skews to the left.

Anyone know what I need to do?

Thanks!

EDIT: Still not centering with this code:

http://jsfiddle.net/mFj3W/

any ideas?

Answers


You may want to assign a percentage to the width rather than a fixed pixel width.

http://jsfiddle.net/FKQFX/


Need Your Help

Getting this error after months of no problems - redirect_uri not owned by application

facebook fb.ui

I had this problem initially when I started the Facebook integration of our site. After doing some searching, found the solution and fixed it.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.