http://www.evenstar.crowned-meadow.net/4.8
My navigation keeps getting cut off if the content isn't longer, but if the content gets longer the navigation is pushed...down...
I need it so that the navigation stays at the top, and isn't dependant on the length of the content.
Here's my stylesheet:
Code:
body {
background-color: #E3DCCA;
background-image: url(back03.png);
background-attachment: none;
scrollbar-face-color: #81805F;
scrollbar-highlight-color: #81805F;
scrollbar-3dlight-color: #81805F;
scrollbar-darkshadow-color: #81805F;
scrollbar-shadow-color: #81805F;
scrollbar-arrow-color: #E3DCCA;
scrollbar-track-color: #E3DCCA;
font-family: Georgia;
font-style:normal;
font-size: 12px;
line-height: normal;
font-weight: normal;
font-variant: normal;
letter-spacing:normal;
color: #CFC6B3;
text-align:center;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
A:link{color:#81805F; text-decoration:none; font-family: Georgia;}
A:visited{color:#81805F; text-decoration:none; font-family: Georgia;}
A:active{color:#81805F; text-decoration:none; font-family: Georgia;}
A:hover{color:#B9B5A0; text-decoration:none; font-family: Georgia;}
U {font-family: Georgia; color: #81805F; letter-spacing: 0pt; border-bottom: 1px; border-style: dashed, border-color: #81805F;}
B, STRONG {font-family:Georgia; font-weight: bold; color: #81805F; letter-spacing:none;}
i, EM {font-family:Georgia; color: #81805F; letter-spacing:none;}
input {
font-family: Georgia;
color: #CFC6B3;
background: 0;
font-size: 12px;
font-weight: normal;
text-decoration: none;
text-align: left;
border-width: 1px;
border-style: dashed;
border-color:#81805F;
}
.head {
font-weight:bold; letter-spacing:2px;
border: dashed #81805F;
border-width: 0px 0px 1px 0px;
color:#81805F;padding-left:2px;
font-size: 12px; font-family: Georgia;
text-align:center;text-transform:uppercase;
}
.sidenav {
color: #81805F;
padding: 2px;
background-color: #DDDCBA;
border-bottom: 1px dashed #81805F;
font-size: 11px;
text-align: center;
display: block;
margin-bottom: 3px;
margin-left: 1px;
}
.sidenav:hover {
color: #B9B5A0;
font-family: Georgia;
background-color: #EBE5D9;
border-bottom: 1px dashed #B9B5A0;
text-decoration: none;
display: block;
}
.box {
color:#81805F;
width:90%;
background:#DDDCBA url(boxside01.png) left repeat-y;
padding-left:50px;
padding-right:5px;
padding-top:5px;
padding-bottom:5px;
border-top:3px solid #81805F;
border-right:3px solid #81805F;
border-bottom:3px solid #81805F;
}
#container {
position:relative;
margin-left:auto;
margin-right:auto;
width: 650px;
min-height:100%;
text-align: left;
background-image: url(contback01.png);
}
#header {
width:100%;
height:450px;
margin: 0px 0px 5px 0px;
position:relative;
z-index:2;
overflow:hidden;
}
#content {
font-family: Georgia;
color: #BBB19D;
font-size: 12px;
position:relative;
width: 465px;
padding: 15px;
margin-bottom: 10em;
}
#sidebar {
font-family: Georgia;
color: #B0AF8B;
font-size: 12px;
float: right;
position:relative;
right: 27px;
width: 155px;
padding: 5px;
margin-bottom: 10em;
margin-top:-47em;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height: 24px;
}
#footer p {margin:0;padding:0}
.divider1 {
width:100%;
height:5px;
overflow:hidden;
position:relative;
}
#clearfooter {height:27px;width:100%;clear:both}
.blank , .blank2 {
position:absolute;
left:547px;
width:7px;
height:0px;
overflow:hidden;
}
.blank {top:-1px;}
So, what's the problem? How can I fix this?