Misaligned Page Options

[YourSuperior]

Well I just finished coding my layout, and my friend is using a different resolution and they said the layout looks really misaligned on their computer and I use 1280x800 resolution. Can someone help me fix it? This is what it looks like on my computer:

click to enlarge

Here's the site: http://takecamera.com/alvinward/test.php

[broken-doll]

I suppose you change your "#content" code to absolute positioning, and use margin-left, instead of just left.

[libertie]

#content {
/* Sets the position of the main div as well as the default fonts for the content */
position: relative;
width: 591px;
overflow: none;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
color: #FFFFFF;
text-align: justify;
left: 50%;
margin-left: -390px;
top: -140px;
}

This code, in every resolution, will position the left side of the div exactly center of the page - then you need to move it to the left, so it will be exactly centered. What I usually do then is divide the total width of the content in half - it's about 780px - and give it a negative margin-left.

You would, of course, want to do the same for the sidebar only you wouldn't move it as far left (you may even have a positive margin).

[YourSuperior]

Hmm, but that makes it misaligned for me. :-\

[YourSuperior]

Forgive me for double posting, but would it be better if I code it with Dreamweaver?

[libertie]

I prefer to use a text editor, personally. I like having full control over my code, knowing what everything is, etc, and I don't like the extra stuff DW puts in. But if you just used the code as I posted it, it probably won't work - basically, you'll want to play around with the numbers a little bit, particularly the margin-left property.

[YourSuperior]

But can Dreamweaver do multi-resolution compatibility?

[libertie]

I'm sure it can, but I'm not really the right person to tell you whether or not it'd be easier, because I just don't like using it. I still think it would be easier, since you've already made the layout, to fix the code to make it fluid rather than trying to do it in a different program.

Maybe someone who does use Dreamwaver can give you some pointers?

[YourSuperior]

What's a perfect way to design a page where it's aligned in most resolutions/browsers?

[libertie]

Have you tried something like this? Try using it in place of your content/sidebar:

CODE

#content {
    /* Sets the position of the main div as well as the default fonts for the content */
    position: relative;
    width: 591px;
    overflow: none;
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    color: #FFFFFF;
    text-align: justify;
    left: 50%;
    margin-left: -386px;
        top: -140px;
}
#navigation {
    /* Sets the position for the sidebar as well as the default module fonts */
    position: absolute;
    width: 164px;
    overflow: hidden;
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    color: #FFFFFF;
    text-align: justify;
    top: -1px!important;
              top: -420px;
    left: 50%;
    margin-left: 218px;
}