works good in most browsers but when resized it doesnt.

[Raztat]

My site looks good on most browsers but when people resize their screens or have the resolution set 800x600 it looks all messed up, the banner goes off the page, text runs into things. How will I go about fixing this? ill post the css code below.


/* CSS Document */

body {
background-color: #FFFFFF;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
h1 {
color: #009900;
font-size: 16px;
font-family:Georgia, "Times New Roman", Times, serif;
}
#h1 {
color: #009900;
font-size: 16px;
font-family:Georgia, "Times New Roman", Times, serif;
}
h2 {
color: #000000;
font-size: 14px;
font-family:Georgia, "Times New Roman", Times, serif;
}
div#wrapper {
width: 80%;
background-color:#FFFFFF;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}
div#header {
padding: 15px;
margin: 0px;
text-align: center;
}
div#nav {
padding: 10px;
margin-top: 1px;
float: left;
width: 25%;
}
div#main {
margin-left: 30%;
margin-top: 1px;
padding: 10px;
}
div#footer {
padding: 15px;
margin: 0px;
}
p {
color: #8B4513;
letter-spacing: 2px;
}
#p {
padding-right: 200px;
}
#footer {
font-size: 8px;
background-color: #8ec63f;
color: #8B4513;
letter-spacing: 2px;
}


#rightside {
font-size: 10px;
padding: 15px;
width: 137px;
right: 321px;
top: 305px;
position: absolute;
height: 95px;
}
ul#navmenu {
margin : 0;
padding : 0;
list-style-type : none;
}

ul#navmenu li {
margin-bottom : 5px;
}

ul#navmenu a {
display : block;
width : 190px;
height : auto;
background : #003366 url(images/glossyback.jpg) repeat-x; /* CHANGED/ADDED THIS */
text-decoration : none;
color : #009900;
cursor : pointer;
}

ul#navmenu a:hover, ul#navmenu a:focus, ul#navmenu a:active,
ul#navmenu a.selected, ul#navmenu a.selected:hover, ul#navmenu a.selected:focus, ul#navmenu a.selected:active {
background : #333 url(images/glossyback2.jpg) repeat-x;
color : #009900;
}

ul#navmenu a.selected {
text-align : left;
cursor : default;
}

ul#navmenu a:hover, ul#navmenu a:focus, ul#navmenu a:active {
background : #333 url(images/glossyback2.jpg) repeat-x; /* CHANGED/ADDED THIS */
color : #fff;
}

.style1 {
color: #999999;
font-size: 36px;
}
.style3 {color: #999900}
.style4 {
color: #97CB4F;
font-weight: bold;
}
.style5 {font-size: 10px}


you can see my site at http://www.bkconway.com

[Twey]

Never mix absolute and relative units (like pixels and percentages as you've done there) unless you really know what you're doing. Use either solely pixels or solely percentages, preferably the latter.

[Raztat]

so that will fix my problem? ill give it a try in the morning thanks.