hi,
how can i get my footer to stretch the width of the viewport? I have tried width:100% but it doesnt work.
It can be seen at:http://www.alphatest.co.uk
the css is as follows:
/* CSS Document */
/* to get the secondaryNav the same as the main nav width you need to find out what 23% (it was 23% instead of 25% to give 2% gutter) of the content area is. You do this by dividing 23 by 75 and then multiplying by 100. For padding add in %. this may have to be a guess at first, but what ever you add in padding take away in overall width in %*/
body{
margin:0;
padding:0;
/*background:url(c2_images/corp2_back.gif) repeat-x;*/
background:#ccffff;
font-family:Arial, Helvetica, sans-serif;
}
#wrapper{
width:90%;
max-width:1100px;
margin:2% auto;
background: #ccffff; /*this used to be e5e5e5 */
}
.wrapper{
width:100%;
background-color:#cccccc;
background:url(c2_images/bigwrap_bl_shad.jpg) no-repeat left bottom;
}
.wrap_outer{background:url(c2_images/bigwrap_br_shad.jpg) no-repeat right bottom;
}
.wrap_inner{background:url(c2_images/bigwrap_tl_shad.jpg) no-repeat left top;
}
#header{
width:98%;
height:22%;
background:url(c2_images/bigwrap_tr_shad.jpg) no-repeat right top;
overflow:hidden;
padding-top:2%;
margin-left:1.9%;
margin-bottom:2%;
}
#header img{overflow:hidden;}
#logocover{float:left; }
#logohead{float:left; width:31%; margin-left:2%; padding:7px; height:22%;}
#logohead h1{color:#993333; font-family:Arial, Helvetica, sans-serif;}
#logopic{float:right; margin-right:1.3%; }
#mainNav{
float:left;
width:16%;
background-color: #0099CC;
margin-left:4%;
margin-top:2%;
}
#mainNav li{list-style:none; color:#FFFFFF; }
#mainNav ul{
margin:0;
padding:0;
list-style: none;
}
#mainNav ul a:link, #mainNav ul a:visited {
display:block;
text-decoration:none;
text-indent:25px;
width:120px;
height:39px;
border:#0099cc;
line-height:39px;
color: #ffffff;
background:#0099cc; background:url(c2_images/button.gif) no-repeat left top;
}
#mainNav ul a:hover, #mainNav ul a:active {
color: #FFFF00;
background:#0099cc; background:url(c2_images/button_over.gif) no-repeat left top;
border:#0099cc;
}
#content{
float:left;
width:76%;
background-color:#ffffff;
margin-right:4%;
margin-top:2%;
}
#content h2{color:#333333; text-align:center;}
#mainContent{
float:left;
width:59%;
background-color:#996600;
padding-top:30px;
padding-left:3%;
padding-right:3%;
}
#secondaryNav{
float:right;
margin:auto 0;
width:29%;
padding-right:1%;
background-color:#FFFFff;
}
#latestnews{
float:left;
max-height:300px;
max-width:170px;
min-width:170px;
/*margin:15px 0 0 0;
padding: 5px 0 5px 0; */
}
.latestnews{
width:100%; background:url(c2_images/sidebox_bl.gif) no-repeat left bottom;}
.ln_outer{background:url(c2_images/sidebox_br.gif) no-repeat right bottom;}
.ln_inner {
background:url(c2_images/sidebox_tl.gif) no-repeat left top; padding-left:10px;}
#latestnews h3{
background:url(c2_images/sidebox_tr.gif) no-repeat right top; text-align:center; padding-top:13px; padding-bottom:10px; color:#993333;}
#latestnews p{width:145px; font-size:12px; padding-left:8px; padding-right:8px; padding-bottom:15px; color:#666666;}
#footer{
clear:both;
padding:4px;
background-color: #999999;
height:40px;
}
#footer p{font-size:10px; color:#FFFFFF; line-height:10px;}
#footer a:link, #footer a:visited {
display:inline;
line-height:10px;
text-decoration:none;
color: #ffffff;
font-size:10px;
background:none;
}
#footer a:hover, #footer a:active {
display:inline;
line-height:10px;
color: #FFFF00;
font-size:10px;
background:none;
}
thanks for your help
