HTML, Changing Pixel Values To Percent Values?

I am making a web page for a the sixth grade at my middle school.

http://seklym4.t35.com/sixth.html

(the thing on the far right is a calendar, but I have the files

for it stored locally)

That is what I have so far, I know that when my teacher sees

my web page, her screen resolution will be different than what

I have right now. I want to have all of the stuff on the page to be

aligned as it is now when she looks at it.



To do this I have decided that I will change all the pixel values to percent values, but whenever I try to change a value, the element

that I change it for ends up being too large, or small.

--How do I determine what percent to set these values to so

that the element stays the same size?--



Thanks in Advance for your helpHTML, Changing Pixel Values To Percent Values?
Stick to using pixel size for the main table and align=';center';. Others inside can be percentages. Yahoo does this with the page around 800 pixels wide. Use a different bgcolor or background for body and table. I do this with tiny images or thin stripes that are tiled by the browser. Example:



%26lt;body background = ';photos/back0.gif';%26gt;

%26lt;table border=';0'; cellpadding=';0'; background=';photos/backrb.jpg'; align=';center'; width=';795';%26gt;HTML, Changing Pixel Values To Percent Values?
Take a look at the fallowing example:



%26lt;html%26gt;

%26lt;head%26gt;

%26lt;meta http-equiv=';Content-Type'; content=';text/html; charset=utf-8'; /%26gt;

%26lt;title%26gt;Fictional web Site%26lt;/title%26gt;

%26lt;style%26gt;

body{

padding:0px;

margin:0px;

}

div{

color:gray;

font-style:italic;

text-align:center;

font-size: 16px;

}

#header{

margin:auto;

width:auto;

height:50px;

background-color:red;

}

#navigation {

width: auto;

height: 25px;

background-color: yellow;

}

#content{

margin:auto;

width:auto;

height:500px;

background-color:green;

}

#footer{

margin:auto;

width:auto;

height:50px;

background-color:blue;

}

%26lt;/style%26gt;

%26lt;/head%26gt;



%26lt;body%26gt;

%26lt;div id=';header';%26gt;This is the header%26lt;/div%26gt;

%26lt;div id=';navigation';%26gt;This is the navigation bar%26lt;/div%26gt;

%26lt;div id=';content';%26gt;This is the content%26lt;/div%26gt;

%26lt;div id=';footer';%26gt;This is the footer%26lt;/div%26gt;

%26lt;/body%26gt;

%26lt;/html%26gt;



If you decide to use this example as your page layout. You should be careful of how you work out your content and the divs inside the ';content div';. Sometimes divs might collapse or overlap when user resize their browser. Another problem is that different browser might display the page differently. I hope this will help.