Positioning with CSS for screen resolution

[moogle1979]

Here is my index page code

Code:

Welcome,


Status:
Money:
Bank:
Level:
HP:
Exp:
Logout

Please Login to Start Playing

Username:
Password:  

Lost Password?

 

Welcome to Rigganmore

The Land of a Thousand Dreams

Not a Member?

Here is my CSS page with the positioning problems

Code:

/*********************************
* Main Page Stuff *
*********************************/
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: tahoma, ariel, sans-serif;
font-size: 12px;
}
img {
border: none;
}
a {
color: #002a4c;
}
div.clear_float {
clear:both;
}
.float_right {
float: right;
}
.center {
text-align:center
}
div.wrapper {
width: 100%;
margin-left : 0px;
margin-right: 0px;
background-color: #002a4c;

}
/*********************************
* Main_Header *
*********************************/
div#main_header {
clear:both;
height: 200px;
position: absolute;
width: 100%;
}
/*********************************
* Header *
*********************************/
div#header {
clear:both;
height: 200px;
position: absolute;
width: 100%;
}
/*********************************
* Header_User *
*********************************/
div#header_user {
clear: both;
position: absolute;
height: 30px;
left: 50%;
top: 50px;
margin-left: -400px;
padding-top: 10px;
width: 780px;
font-size: 10pt;
}
#header_user form {
margin-right: 5px;
}
div#welcomemsg {
margin-left: 550px;
}
/*********************************
* Forms *
*********************************/
input.button {
font-size: 14px;
text-align: center;
background-color: #002a4c;
color: #d9e1bc;
border: none;
padding-top: 2px;
padding-bottom: 2px;
margin-left: 10%;
}
#main_login {
padding-right: 20px;
}
/*********************************
* Links *
*********************************/
span#lost {
position: relative;
left: 20px;
}
/*********************************
* Player Stats *
*********************************/
div#stats {
text-align: center;
position: absolute;
left: 515px;
height: 100px;
width: 260px;
font-size: 8pt;
}
span.statmsg {
font-size: 12px;
font-weight: bold;
}
img#avatar {
width: 100px;
height: 100px;
float: left;
border: solid #006699 1px;
}
/*********************************
* Navigation *
*********************************/
div#navigation {
position: absolute;
left: 20%;
margin-left: -150px;
top: 175px;
height: 30px;
width: 90%;
vertical-align: middle;
}
div#side_nav {
border: 1px solid #FFFFFF;
position: absolute;
left: 90%;
margin-left: -115px;
top: 200px;
width: 105px;
}
div#side_nav h4{
margin: 10px 0 5px 0;
padding: 0;
text-align: center;
}
div#side_nav a{
margin: 10px 0 5px 0;
padding: 0;
text-align: center;
}
/*********************************
* Main Body *
*********************************/
div#main_body {
clear:both;
top: 225px;
position: absolute;
width: 100%;
height: 100%;
}
div#body {
clear: both;
position: absolute;
left: 20%;
margin-left: -50px;
top: 215px;
width: 60%;
}

If you notice all of them position correctly except div#side_nav. For some reason I cannot get that one div to position correctly for all screen resolutions however I have the whole rest of the page positioned correctly based on screen resolution.

Can someone help me?

[Rob MacKay]

Sorry that code is displaying very mashed up – any chance of a live version?

[Author]

Posts