CSS Forum

**silverglade** · 08-25-2009, 01:33 PM

hi, my footer is too wide, i cant make it the width of my wrapper, any help greatly appreciated. here is the page im talking about.

http://centraljerseytees.com

here is the css to the page

Code:

@charset "utf-8";
/* CSS Document */

* {
    padding: 0;
    margin: 0;
}

body { 
margin: 0;
padding-bottom: 25px;
background-color: #1A492A;
}

#wrapper {
    overflow: auto;
    background: url(images1/index.png) no-repeat;
    width: 921px;
    height: 712px;
     
    margin-top: 25px;
    margin-right: auto;
     
    margin-left: auto;
     
}

#shirt {
    float: left;
    background: url(images1/black_shirt.jpg) no-repeat;
    width: 323px;
    height: 390px;
    float: left;
    margin-top: 285px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: 48px;
    
     
     
}

 #nav {
    float: left;
    width: 237px;
    margin-top: 275px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: 20px;
    
 }

#footer {
    margin: 0 auto 0 auto;
    width: 921px;
    color: white;
    background-color: black;
    text-align: center;
     clear: both;
}
 
 #footer a:link , #footer a:visited  {
text-decoration: none;
color: green;
}
#footer a:active, #footer a:hover {
text-decoration: none;
color: #CC6699;
}

and here is the html for the page

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="shirts.css" type="text/css" charset="utf-8" />
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]--> 
<title>Central Jersey Tees Home</title>
<style type="text/css">
<!--
.style1 {
    font-size: x-large;
    font-weight: bold;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images1/slices_on/home.png','images1/slices_on/about.png','images1/slices_on/catalogue.png','images1/slices_on/designs.png','images1/slices_on/quote.png','images1/slices_on/contact.png')">
<div id="wrapper"> 

<div id="nav"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images1/slices_on/home.png',1)"><img src="images1/slices_off/home.png" name="Image1" width="237" height="61" border="0" id="Image1" /></a><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images1/slices_on/about.png',1)"><img src="images1/slices_off/about.png" name="Image2" width="237" height="75" border="0" id="Image2" /></a><a href="catalogue.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images1/slices_on/catalogue.png',1)"><img src="images1/slices_off/catalogue.png" name="Image3" width="237" height="60" border="0" id="Image3" /></a><a href="designs.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images1/slices_on/designs.png',1)"><img src="images1/slices_off/designs.png" name="Image4" width="238" height="66" border="0" id="Image4" /></a><a href="quote.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images1/slices_on/quote.png',1)"><img src="images1/slices_off/quote.png" name="Image5" width="235" height="66" border="0" id="Image5" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images1/slices_on/contact.png',1)"><img src="images1/slices_off/contact.png" name="Image6" width="235" height="75" border="0" id="Image6" /></a></div>

 <div id="shirt"></div>



</div>

<div id="footer">  
&copy; Centraljerseytees.com   (site design by <a href="derekvanderven.com">derekvanderven.com</a>)</div>

 
</body>
</html>

**LadynRed** · 08-25-2009, 03:46 PM

Your footer IS the same width. Put a 1px red border around #wrapper and you'll see it. The problem lies elsewhere.

**silverglade** · 05:47 PM

please, do you know what the problem is? i cant figure it out, i tried positioning the footer inside the wrapper, outside the wrapper, i cant figure out why the footer is going off to the side like that. any help is GREATLY appreciated. thanks. derek

edit: ok i had to get a little tricky to solve it, i couldnt find any other way. i solved it with the following code.

Code:

#footer {
    float: left;
    margin: 10px auto 0 15px;
    width: 900px;
    color: gray;
    background-color: black;
    text-align: center;
     clear: both;
}

the problem is my lower corners are not rounded, when i added "center" to my wrapper background, it created a black spot on the bottom of the shirt, but the corners were rounded again. i decided to take out the "center".

edit: nevermind, i got the bottom corners rounded by increasing the height of the wrapper. yay.