Skip navigation
Alice Sumner
Currently Being Moderated

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: #cs4

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_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>

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points