i have a website layout that is both horizontal and vertical centered. I know how create it, but when i add my footer to the site, there is scrolling on the website but not on the footer.
I need it to scroll the entire site if needed AND the site itself (without) the footer should still be vertical centered. The footer should always be fixed to the bottom.
In my current layout, i can scroll the centerwrap, but when the screen resolution is 1024x 768 or less, the text in the centerwrap is not visible, not even when scrolling
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title></title>
<style>
*{
margin:0;
padding:0;
border:0
}
body{
color:#666666;
background:url(../media/im
ages/back_
pattern.jp
g) repeat-x top fixed;
font:11px Tahoma,Helvetica,Arial,san
s-serif,"L
ucida Grande","Myriad Web","Trebuchet MS";
height:100%;
}
a{
color:#666666;
text-decoration:underline
}
a:hover{
color:#333333
}
input,select,textarea{
border:#c1c2c2 1px solid;
padding:2px;
color:#000000;
font:11px tahoma,sans-serif
}
select{
padding:1px
}
li{
list-style:none
}
/*--- GECENTREERDE LAYOUT ---*/
#centerwrap{
width:950px;
margin:0 auto;
height:642px;
position:relative;
}
/* \*/
#centerwrap{
margin:-321px 0 0 -475px;
position:absolute;
left:50%;
top:50%;
}
#footer {
height:18px;/*same height as margin bottom on body*/
background:#fff;
width:100%;
position:fixed;
bottom:0;
left:0;
text-align:center;
}
* html #footer {position:absolute}/*for ie*/
#footer a{
padding-top: 0px;
display: block;
width: 100%;
height: 100%;
background: #999999;
}
#footer a:hover{
background: #68813D;
}
</style>
</head>
<body>
<div id="centerwrap">this is my content
</div>
</div>
<!--/centerwrap -->
<div id="footer">
here is my footer</div>
</body>
</html>
Start Free Trial
