percentages and bigger resolutions problem

[blacktears]

I have done a page and before I do any futher I want to know how I can make it look reasonable and centered on a bigger res. I have tested it on my 15" screen and a 19" and it's just not quite right on the 19" and I was wondering if it had anything to do with the fact I have used percentage instead of pixel measurements.

CSS
body { background-color: #071E30;
color: white;
text-align: center;
margin: 0px;
padding: 0px;
font-family: "century gothic", sans-serif;
}

#wrapping {

width: 80%;
border: white solid 1px;
margin-left: 9%;
margin-right: 10%;
margin-top: 2%;
margin-bottom: 0%;
height: 550px;
padding-right: 9px;
padding-bottom: 0px;
background: url("images/synthbg.gif");



}


h1 {

font-family: arial, sans-serif;
font-size: 12pt;
padding: 0px;
margin-left: 0px;
float: right;
position: relative;
z-index: 2;





}

#linkbox {



padding: 5px;
padding-right: 2%;
margin-left: -70px;
margin-top: 3%;
margin-bottom: 3%;
color: white;
list-style: none;
float: left;
line-height: 30pt;
font-size: 11pt;
width: 120px;
height: 269px;
background: url("images/rounded.gif") #071E30;


}

#links {

padding-top: 8%;
padding-left: 9%;
padding-right: 2%;
margin-left: -4%;
margin-top: 0%;
color: white;
list-style: none;
float: left;
line-height: 30pt;
font-size: 11pt;
width: 120px;



}



a {

text-decoration: none;
color: #fff;
font-family: "century gothic", arial, sans-serif;
background: #071E30;
border: 0px;



}



#addy {background-color: transparent; border: 0px; text-decoration: none;}
#emailaddy {background-color: #799AC3; border: 0px; text-decoration: none;}

a:hover {text-decoration: underline; border: 0px;}

#name {

margin-top: 29px;
margin-left: 40px;
padding: 0px;
background-color: #071E30;
width: 204px;
height: 35px;
float: left;





}

#headshot {

margin-top: 28px;
margin-left: 51px;
padding: 0px;
float: left;
width: 88px;
height: 88px;
position: relative;


}

#metalborder {

margin-top: 6px;
margin-right: -71px;
float: right;
background: url("images/metalborder.jpg");
width: 312px;
height: 130px;



}

#player {

margin-left: 7px;
margin-top: 47px;
padding: 0px;
float: left;

}


#profiletext {

margin-top: -23px;
margin-left: 80px;
padding-left: 0px;
background: url("images/textboxbg.gif");
width: 520px;
height: 437px;
font-family: "century gothic", arial, sans-serif;
font-size: 8pt;
text-align: justify;
float: left;


}


#maintext {

margin-top: -23px;
margin-left: 80px;
padding-left: 0px;
background: url("images/textbg.gif");
width: 520px;
height: 437px;
font-family: "century gothic", arial, sans-serif;
font-size: 8pt;
text-align: justify;
float: left;


}

#othertext {

margin-top: -23px;
margin-left: 80px;
padding-left: 0px;
background: url("images/textboxbg.gif");
width: 520px;
height: 437px;
font-family: "century gothic", arial, sans-serif;
font-size: 8pt;
text-align: justify;
float: left;


}

#trancepic {

margin-top: 2.1%;
margin-left: 5.9%;
padding: 0%;
float: left;
height:24%;
width: 85%;
background: url("images/trancediscog.gif");
background-repeat: no-repeat;

}

#trancepic2 {

margin-top: 30%;
margin-left: 5.9%;
padding: 0%;
float: left;
height:24%;
width: 85%;
background: url("images/trancediscog2.gif");
background-repeat: no-repeat;


}

#original {

margin-left: 6.4%;
margin-top: 4.5%;
padding: 0%;
font-size: 12pt;
color: #071E30;
height: 50px;


}

#remixes {

margin-left: 6%;
margin-top: 3.8%;
padding: 0%;
font-size: 12pt;
color: #071E30;
height: 50px;
width: 200px;



}

.darkcolor {color: #071E30; font-weight: bold;}

#discofill {

margin-top: 10.2%;
margin-left: 4%;
padding: 0%;
float: left;
border: white solid 1px;
width: 91.5%;
height: 76%;
overflow: auto;


}

#discolist {

margin-top: 3%;
margin-left: 6%;
padding: 0%;
list-style: none;
float: left;
width: 90%;
height: 90%;




}

#textwrapping {

margin-top: 8%;
margin-left: 0px;
padding: 0px;
width: 515px;
height: 354px;
font-family: "century gothic", arial, sans-serif;
font-size: 8pt;
text-align: justify;
float: left;
overflow: auto;




img
{ border-style: none;
}




}

#textbox1 {margin-top: 36px; margin-left: 0px; width: 49%; height: 41%; float: left;}
#textbox2 {margin-top: 36px; margin-left: 6px; width: 49%; height: 41%; float: left;}
#textbox3 {margin-top: 7px; margin-left: 2px; background: url("images/inverted.gif"); background-repeat:no-repeat; width: 49%; height: 41%; float: left;}
#textbox4 {margin-top: 6px; margin-left: 6px; width: 49%; height: 41%; float: left;}

#cv {

margin-top: 1%;
margin-left: 4%;
list-style: none;
line-height: 28px;
color: #071E30;
width: 100%;
padding: 0px;


}

#cvbox2 {

margin-top: 11.1%;
margin-left: -3%;
padding: 0px;
width: 100%;
line-height: 28px;
list-style: none;
text-align: right;

}

#clients {

margin-top: 4%;
margin-left: -4%;
padding: 0px;
width: 100%;
line-height: 15px;
list-style: none;
text-align: right;

}

#linecontact {

margin-left: 11%;
margin-top: 20px;
font-size: 10pt;
color: #071E30;
height: 50px;
width: 81%;
text-align: center;
float: left;

}

#detailsbox {

margin-left: 48px;
margin-top: 20px;
padding: 10px;
float: left;
text-align: center;
border: white solid 1px;
width: 400px;
background-color: #799AC3;


}

#detailsbox2 {

margin-left: 48px;
margin-top: 20px;
padding: 10px;
float: left;
text-align: center;
border: white solid 1px;
width: 400px;
height: 95px;
background: url("images/hemstockandjennings.jpg") #799AC3;
background-repeat: no-repeat;

}


#detailsbox3 {

margin-left: 48px;
margin-top: 20px;
padding: 10px;
float: left;
text-align: center;
border: white solid 1px;
width: 400px;
height: 95px;
background: url("images/slidemanagement.jpg") #799AC3;
background-repeat: no-repeat;
}

#detailsbox4 {

margin-left: 48px;
margin-top: 20px;
padding: 10px;
float: left;
text-align: center;
border: white solid 1px;
width: 400px;
height: 95px;
background: url("images/meninblack.jpg") #799AC3;
background-repeat: no-repeat;
}

A:link img {border: 0px;}


#detailsbox5 {

margin-left: 48px;
margin-top: 20px;
padding: 10px;
float: left;
text-align: center;
border: white solid 1px;
width: 400px;
height: 95px;
background: url("images/mirage.jpg") #799AC3;
background-repeat: no-repeat;
}

#smallergap {

margin-bottom: -10px;

}


#jennings {

margin-top: 8%;
margin-left: 45%;
padding: 0%;
height: 32px;
float: left;

}


#hemstock {

margin-top: 8%;
margin-left: 55%;
height: 32px;
padding: 0%;
float: left;
}

#jemstone {

margin-top: 8%;
margin-left: 44.5%;
height: 32px;
width: 226px;
padding: 0%;
float: left;

}




#para1 {

margin-left: 6%;
margin-top: 3%;
width: 400px;
color: #071E30;
text-align: center;
}

#para2 {

margin-left: 6%;
margin-top: 3%;
width: 400px;
color: #071E30;
text-align: center;
}

#tv {

margin-left: 8%;
margin-top: 3.6%;
padding-left: 0%;
float: left;
width: 435px;
height: 368px;
background-image: url("images/tv.gif");
}

#chrisjenningsaudio {

margin-top: 5%;
margin-left: 26.5%;
padding: 0%;
float: left;
list-style: none;
color: #071E30;
width: 49%;
text-align: center;
font-weight: bold;


}

#audiolistleft {

margin-top: 10px;
margin-left: 105px;
padding: 0px;
float: left;
height: 100px;
width: 49%;
list-style: none;
text-align: left;
color: #071E30;

}


#audiolistright {

margin-top: 10px;
margin-left: -200px;
padding: 0px;
float: left;
height: 100px;
width: 49%;
list-style: none;
text-align: right;
color: #071E30;
}


#linkboxright {



padding: 5px;
padding-left: 2%;
margin-right: -78px;
margin-top: 12.5%;
margin-bottom: 3%;
color: white;
list-style: none;
float: right;
line-height: 30pt;
font-size: 11pt;
width: 128px;
height: 269px;
background: url("images/roundedright.gif") #071E30;
position: relative;
z-index: 9;



}

#profiletitle {

margin-top: 5%;
margin-left: 215px;
padding: 0px;
text-align: center;
font-family: ethnocentric, arial, sans-serif;
background-color: transparent;
color: white;
font-size: 12pt;
float: left;
height: 20px;


}


#contacttitle {

margin-top: 3.5%;
margin-left: 215px;
padding: 0px;
text-align: center;
font-family: ethnocentric, arial, sans-serif;
background-color: transparent;
color: white;
font-size: 12pt;
float: left;
height: 20px;






}

#titles {

margin: 0px;
padding: 0px;

}

#audiotitle {

margin-top: 5%;
margin-left: 176px;
padding: 0px;
text-align: center;
font-family: ethnocentric, arial, sans-serif;
background-color: transparent;
color: white;
font-size: 12pt;
float: left;
height: 20px;



}

#studiotitle {

margin-top: 74px;
margin-left: 210px;
text-align: center;
font-family: ethnocentric, arial, sans-serif;
background-color: transparent;
color: white;
font-size: 12pt;
float: left;



}


#linkstitle {

margin-top: 74px;
margin-left: 210px;
text-align: center;
font-family: ethnocentric, arial, sans-serif;
background-color: transparent;
color: white;
font-size: 12pt;
float: left;



}

#discographytitle {

margin-top: 5.5%;
margin-left: 176px;
padding: 0px;
text-align: center;
font-family: ethnocentric, arial, sans-serif;
background-color: transparent;
color: white;
font-size: 12pt;
float: left;
height: 13px;




}

#medialinks {

margin-top: 10%;
margin-left: 3.2%;
padding: 0%;
width: 90%;
height: 200px;
float: left;
border: #7A7A7A solid 1px;
text-align: center;




}

#mediatext {


margin-top: 5%;
margin-left: 4%;
width: 90%;
height: 50px;
padding: 0%;
float: left;
text-align: center;
line-height: 9pt;
font-size: 8pt;




}

#medialist {

margin-top: 20%;
margin-left: 8%;
font-size: 7pt;
padding: 0px;
list-style: none;
text-align: left;
line-height: 30pt;





}


#copyright {

margin-left: 0px;
margin-top: 0px;
padding: 0px;
font-family: "century gothic", sans-serif;
font-size: 7pt;
list-style: none;
height: 10px;


}





HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<head>


<meta name="author"
content="Becka Dawson">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Keywords" content="chris, chris jennings, jennings, music, stoke-on-trent, hanley, stoke, north, studio, music, depeche mode, composer, sound designer,">
<meta name="Title" content="Rainstorm - Photography">
<meta name="Description" content="Rainstorm v2.0 is an online portfolio for Rebecca Dawson's creative exploration within photography and visual art. ">

<link rel="stylesheet" type="text/css" href="stylechris.css">

<title>Chris Jennings Music - Profile</title>

</head>

<body>

<div id="wrapping">


<div id="linkbox">

<ul id="links">

<li><a href="main.html">HOME</a></li>
<li><a href="profile.html">PROFILE</a></li>
<li><a href="discography.html">DISCOGRAPHY</a></li>
<li><a href="audio.html">AUDIO/VISUAL</a></li>
<li><a href="studio.html">STUDIO</a></li>
<li><a href="contact.html">CONTACT</a></li>


</ul>

</div>

<div id="name">
<img src="images/chrisjennings.gif">
</div>


<div id="headshot">
<img src="images/headshot.gif" alt="head shot of Chris Jennings">
</div>

<div id="metalborder">

<object id="player" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="300" height="15" >
<param name="allowScriptAccess" value="sameDomain"/>
<param name="movie" value="/xspf_player_slim.swf"/>
<param name="quality" value="high"/>
<param name="bgcolor" value="#E6E6E6"/>

<embed src="xspf_player_slim.swf?autoplay=true&autoload=true&playlist_url=rainstormplaylist.xspf"
quality="high" bgcolor="#E6E6E6" name="xspf_player" allowscriptaccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
align="center" height="15" width="280">
</embed>
</object>

</div>



<div id="maintext">


<div id="textbox1">

<ul id="cv">

<li>MULTIMEDIA MUSIC</li>
<li>FILM SCORES + POST PRODUCTION</li>
<li>REMIX + RECORDING PROJECTS</li>
<li>CORPORATE ADVERTISING SOUNDTRACKS</li>
<li>TV/RADIO JINGLES</li>
<li>DIGITAL AUDIO EDITING</li>


</ul>


</div>

<div id="textbox2">

<ul id="cvbox2">


<li>PRODUCER/DJ</li>
<li>SOUND DESIGNER</li>
<li>COMPOSER</li>

</ul>

</div>

<div id="textbox3">
</div>

<div id="textbox4">

<ul id="clients">

<li id="line1clients">CLIENTS</li>
<li>BBC</li>
<li>ITV</li>
<li>Channel 4</li>
<li>Sky and Cable networks</li>
<li>Sony</li>
<li>Universal</li>
<li>MTV</li>
<li>Electronic Arts</li>


</ul>
</div>



</div>


<div id="linkboxright">


</div>

</div>



<ul id="copyright">
<li>&copy ALL IMAGES + MUSIC COPYRIGHT CHRIS JENNINGS // DESIGN COPYRIGHT R.DAWSON <a href="http://www.rainstormphotography.co.uk">RAINSTORMPHOTOGRAPHY.CO.UK</a></li>
</ul>





</body>
</html>

Here is how it should look on the page, generally,

http://www.rainstormphotography.co.uk/mainpage.gif

[Excavator]

Hello blacktears,
without copying/pasting your code and CSS and rebuilding your page (MUCH easier if you'd just post a link!)
I think if you changed your CSS to read like this:
#wrapping {

width: 80%;
border: white solid 1px;
margin: 2% auto 0 auto;
height: 550px;
padding-right: 9px;
padding-bottom: 0px;
background: url("images/synthbg.gif");



}


I think the top margin will work like that using %. If not... maybe a px margin would be ok?

[blacktears]

I have tried that :

#wrapping {

width: 80%;
border: white solid 1px;
margin: 2% auto 0 auto;
height: 550px;
padding-right: 9px;
padding-bottom: 0px;
background: url("images/synthbg.gif");



}

and it is still doing this:


http://www.rainstormphotography.co.uk/chris/screenshot.jpg

I want it to be in the middle too...

Here is a link to the site on my server:

http://www.rainstormphotography.co.uk/chris/main.html

[Excavator]

Oh I see, you want it centered vertically AND Horizontally.
margin: 0 auto; does the first very easily.

The horizontal centering is a whole other problem. I've never been able to do it and have it work well in all browsers.

Have a look at these pages, or google "horizontal CSS center" for more.
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
http://www.w3.org/Style/Examples/007/center.html