The footer is moving to the left and no longer centered. It is like it is no longer in the container
Apr 25, 2012 10:22 AM
Tags: none (add) #cs4The footer is moving to the left and no longer centered. It is like it is no longer in the container. I don't see the container outline any longer. This same thing is happening in two different websites. Can you tell me what I am doing wrong?
<!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" />
<title>Dragonfly Toy Puppies Home Page</title>
<style type="text/css">
<!--
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #FFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #000;
}
.twoColFixLtHdr #container {
width: 900px; /* the auto margins (in conjunction with a width) center the page */
border: none; /* this overrides the text-align: center on the body element. */
background-color: #000;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.twoColFixLtHdr #header {
background-color: #000;
background-image: url(Images/Header.jpg);
background-repeat: no-repeat;
height: 350px;
width: 900px;
padding-top: 0;
padding-right: 0px;
padding-bottom: 20;
padding-left: 0px;
}
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 240px;
height: auto;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-color: #000;
text-align: center;
}
a img {border: none;
}
a { outline: 0;
}
#sidebar1 a #poodle {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
display: block;
margin-top: 0px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
cursor: pointer;
text-decoration: none;
}
#sidebar1 a #maltese {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
display: block;
margin-top: 0px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
cursor: pointer;
}
#sidebar1 a #yorkie {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
display: block;
margin-top: 0px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
cursor: pointer;
}
#sidebar1 a #partiyorkie {
display: block;
margin-top: 0px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
cursor: pointer;
}
#sidebar1 a #dachshund {
display: block;
margin-top: 0px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
cursor: pointer;
}
#sidebar1 a #maltipoo {
display: block;
margin-top: 0px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
cursor: pointer;
}
#sidebar1 a #morkie {
display: block;
margin-top: 0px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
cursor: pointer;
}
.twoColFixLtHdr #mainContent {
padding: 20; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background-color: #000;
height: auto;
width: 660px;
text-align: center;
margin: 0px;
float: left;
}
.twoColFixLtHdr #footer {
background-color: #000;
width: 900px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
clear: none;
float: none;
height: auto;
}
.twoColFixLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body class="twoColFixLtHdr">
<div id="container">
<div id="header">
<!-- end #header --></div>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a> </li>
<li><a href="#">Services</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Sires & Dams</a>
<ul>
<li><a href="#">Toy Poodles</a></li>
<li><a href="#">Maltese</a></li>
<li><a href="#">Yorkies</a></li>
<li><a href="#">Parti Yorkies</a></li>
<li><a href="#">Mini Dachsunds</a></li>
<li><a href="#">Maltipoos</a></li>
<li><a href="#">Morkies</a></li>
</ul>
</li>
<li><a href="#">Puppy Care</a></li>
<li><a href="#">Success Stories</a></li>
<li><a href="#">Contact Us</a> </li>
</ul>
<div id="sidebar1">
<h2>Puppies for Sale</h2>
<p> Click on your Favorite Breed</p>
<h2><a href="poodle.htm" onmousedown="MM_swapImage('poodle','','Images/poodle_active.jpg',1)"> <img src="Images/poodle_link.jpg" alt="Link to Poodle Puppy Page" name="poodle" width="200" height="250" id="poodle" onmouseover="MM_swapImage('poodle','','Images/poodle_hover.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>
<a href="maltese.htm" onmousedown="MM_swapImage('maltese','','Images/maltese_active.jpg',1) "><img src="Images/maltese_link.jpg" alt="Link to Maltese Puppy Page" name="maltese" width="200" height="200" id="maltese" onmouseover="MM_swapImage('maltese','','Images/maltese_hover.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>
<a href="yorkie.htm" onmousedown="MM_swapImage('yorkie','','Images/yorkie_active.jpg',1)"> <img src="Images/yorkie_link.jpg" alt="Link to Yorkie Puppy Page" name="yorkie" width="200" height="200" id="yorkie" onmouseover="MM_swapImage('yorkie','','Images/yorkie_hover.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>
<a href="parti_yorkie.htm" onmousedown="MM_swapImage('parti_yorkie','','Images/partiyorkie_activ e.jpg',1)"><img src="Images/partiyorkie_link.jpg" alt="Link to Parti Yorkie Puppy Page" name="partiyorkie" width="200" height="200" id="partiyorkie" onmouseover="MM_swapImage('partiyorkie','','Images/partiyorkie_hover. jpg',1)" onmouseout="MM_swapImgRestore()" /></a>
<a href="dachshund.htm" onmousedown="MM_swapImage('dachshund','','Images/dachshund_active.jpg ',1)"><img src="Images/dachshund_link.jpg" alt="Link for Mini Dachshund Puppy Page" name="dachshund" width="200" height="200" id="dachshund" onmouseover="MM_swapImage('dachshund','','Images/dachshund_hover.jpg' ,1)" onmouseout="MM_swapImgRestore()" /></a>
<a href="maltipoo.htm" onmousedown="MM_swapImage('maltipoo','','Images/maltipoo_active.jpg', 1)"><img src="Images/maltipoo_link.jpg" alt="Link for Maltipoo Puppy Page" name="maltipoo" width="200" height="200" id="maltipoo" onmouseover="MM_swapImage('maltipoo','','Images/maltipoo_hover.jpg',1 )" onmouseout="MM_swapImgRestore()" /></a>
<a href="morkie.htm" onmousedown="MM_swapImage('morkie','','Images/morkie_active.jpg',1)"> <img src="Images/morkie_link.jpg" alt="Link to Morkie Puppy Page" name="morkie" width="200" height="200" id="morkie" onmouseover="MM_swapImage('morkie','','Images/morkie_hover.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></h2>
</div>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<h1>Welcome </h1>
<p>This Website is under Construction</p>
<h2>Check Back Soon</h2>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
