2 Replies Latest reply on Apr 25, 2012 10:54 AM by Nancy O.

    The footer is moving to the left and no longer centered. It is like it is no longer in the container

    Alice Sumner Level 1

      The 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 &amp; 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_active.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>