Monitor resolution changes look of website

Question

I have a website that looks fine in my resolution and even in the more common 1024 x 768. Yet, in someone else's browser in 1024 x 768, it's too wide and the website doesn't even center correctly.

Is there a way to have a proper width layout that doesn't change when the resolution is changed?

/* Body */
body {
    background: #535353;
    font-family: Arial;
    font-size: 12px;
    color: Black;
}

form {
margin:0;
padding:0;
display: inline
}

* {
    margin: 0;
    padding: 0;
}

/* Header */
#header {
    margin-left: 100px;
    margin-right: 100px;
    overflow: hidden;
}

/* Logo */
#logo 
{
    background-color: White;
}

/* Menu */
#menu {

    margin-left: 100px;
    margin-right: 100px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0 0 0 0;
    text-align: left;
    background-color: #AB0000;
    font-size: 14px;
    color: White;
    font-weight: bold;
}

#menu a {
    font-size: 14px;
    color: White;
    font-weight: bold;
}

#menu a:hover {
    color: Yellow;
}

/* Spacer */
#spacer {   
    background-color: #8C8C8C;
}

/* Sidebar */
#sidebar {       
    margin-left: 100px;
    margin-right: 100px;
    padding-left: 10px;
    font-weight: bold;
    text-align: left;
    background: url(Images/leftborder.jpg) repeat-x left top;
    background-color: #C2C2C2;
}

#sidebar p {
    color: Black;
    font-weight: normal;
    font-size: 11px;
}

#sidebar a{
    color: Black;
    font-weight: normal;
    font-size: 11px;
}

/* Quick Links */
#quicklinks a{
    color: White;
    font-size: 12px;
    font-weight: bold;
    text-decoration:none
}

/* Content */
#content {
    margin-left: 200px;
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #C2C2C2;
}

#content p {
    font-size: 12px;
}

#content a{
    color: Black;
    font-weight: bold;
}

/* Gallery */
#gallerylinks{
    border-color:Black; 
}

/* Footer Space */
#footerspace {
    background-color: #AB0000;   
}

/* Footer */
#footer {
    width: 891px;
    height: 70px;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0 0 0 0;
    text-align: center;
    background-color: #C2C2C2;
    font-weight: bold;
    color: Black;
}

#footer a {
    font-weight: bold;
    color: Black;
}

#footer a:hover {
    color: Yellow;
}

Answer 1

If you don't want the width to change with resolution/browser size, then use absolute widths in your CSS as opposed to percentages (860px as opposed to 90%).

However if it looks different in someone elses browser, it could be because of their font and font size being different.

Answer 2

Usually you want your layout design to accommodate the users screen resolution. You can get that done by setting your container widths to percentages. Obviously this should be set for the containers and not images.

Answer 3

If the layout changes on different computers, it's likely to be because of

1. Using a different browser and/or operating system
2. The browser window is resized on one of the computers
3. Different text size that breaks the layout (Text resizing in IE does this)
4. Your markup and CSS-code is full of errors.

Care to post some code?

Answer 4

You have two options:

1. Adjust your layout so that it renders properly in percentage units; resize the width of your browser window to test
2. Set your container width using length units (such as pixels) instead of percentage units

Make sure to test in multiple browsers as there are usually subtle variations in the way they interpret the CSS rules. Also consider using a CSS reset library to make this easier.

Answer 5

Browser-based apps are guests on the desktop! You can't ever assume things like screen resolution. You must test your app in as many ways as you can image. Also, use tools like Google's BrowserSize http://browsersize.googlelabs.com/ or FF's WebDeveloper https://addons.mozilla.org/en-US/firefox/addon/60/ to see what your browser app looks like in difference screen sizes.

Answer 6

Also, if the person has a wide screen monitor running at 1024x786, that would make things appear a little weird, too.

Answer 7

This is about centering correctly.

Without the HTML it's a little hard to figure out exactly what's going on, but I don't really see any CSS that would center things.

The trick to centering things in CSS is that you want equal amount of space to the left and right of an item, but since you don't know how big the user's window will be, you don't know how big this space is going to be. The solutions is to use margin:0 auto;

If you guess at the left and right margin sizes for centering things, then you will usually end up with a left margin that is what you specified and a right margin that depends on the user's window size, so things won't look centered if the window size gets bigger than a certain amount.

Here's the deployment on an example page:

The CSS:

#page {
    /* 
       width must be specified or the div will take up all the horizontal 
       space it can (can be ems, %, whatever)
    */
    width:860px;
    /* 
       Top and bottom margins are zero. 
       Left and right are automatically the same. 
    */
    margin:0 auto;
}

The HTML

<div id="page">
    <h1>Something interesting</h1>
    <p>Something enthralling</p>
</div>

Answer 8

I ended up restyling the webpage in 1024X768. Then everything worked out for all other resolutions.