¿Por qué mi pie de página no aparecerá en el área correcta? ¿Puedo afectar el CSS?

Question

En mi sitio web, christianselig.com, mi pie de página aparece en todas las páginas excepto en la página about.html (http://christianselig.com/about.html) en la que se muestra cerca de la parte superior por algunas razones.

La página consta de dos divs flotados (uno a la izquierda, uno a la derecha) con un div envolviendo ambos, y me doy cuenta de que los flotadores son probablemente el problema, pero no tengo idea de qué hacer. Los CSS y HTML relevantes se pueden encontrar a continuación, y es obvio que hay más cosas disponibles en el sitio web.

HTML:

<div class="footer-wrapper"> 
      <div class="footer"> 
       <p class="copyright">Copyright &copy; 2012 Christian Selig</p> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Work</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </div> 
     </div> 

CSS:

.footer-wrapper { 
    background: #f7f7f7; /* Old browsers */ 
    background: -moz-linear-gradient(top, #f7f7f7 0%, #d6d6d6 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#d6d6d6)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #f7f7f7 0%,#d6d6d6 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #f7f7f7 0%,#d6d6d6 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #f7f7f7 0%,#d6d6d6 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #f7f7f7 0%,#d6d6d6 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#d6d6d6',GradientType=0); /* IE6-9 */ 
    border-top: 1px solid #ccc; 
    margin: 15px auto 0 auto; 
    overflow: hidden; 
    padding: 8px 0 5px 0; 
} 

    .footer { 
     color: #808080; 
     clear: both; 
     font-family: 'Lucida Grande', Helvetica, Arial, sans-serif; 
     font-size: 0.7em; 
     width: 900px; 
    } 

     .copyright { 
      float: left; 
      margin: 0 0 5px 60px; 
     } 

     .footer ul { 
      float: right; 
      margin: 0 60px 5px 0; 
     } 

     .footer li { 
      display: inline; 
      padding-right: 12px; 
     } 

      .footer li:last-child { 
       padding-right: 0; 
      } 

     .footer a { 
      color: #808080; 
      text-decoration: none; 
     } 

     .footer a:hover, .footer a:active { 
      text-decoration: underline; 
     } 

Cualquier ayuda sería muy apreciada!

Answer 1

Todo lo que necesita es añadir la siguiente, junto con los estilos existentes:

.lr-wrapper { overflow:hidden; } 

more info

Answer 2

Tu problema es lr-wrapper en la parte interior. Sus dos elementos left-side y right-side no ocupan todo el ancho, dejando un espacio intermedio para que quepan otros elementos flotantes.

es necesario agregar un clear antes de que el pie de página para decirle a todos los demás elementos de mantenerse por debajo, puede hacerlo mediante la adición de este justo encima de la div pie de página:

<div style="clear: both;"></div> 

o puede hacerlo de la manera correcta , añadiendo esto a su css y luego ser capaz de aplicar sólo la clase clearfix cuando se necesita algo para romper la flotación:

/* 
* Clearfix: contain floats 
* 
* For modern browsers 
* 1. The space content is one way to avoid an Opera bug when the 
* `contenteditable` attribute is included anywhere else in the document. 
* Otherwise it causes space to appear at the top and bottom of elements 
* that receive the `clearfix` class. 
* 2. The use of `table` rather than `block` is only necessary if using 
* `:before` to contain the top-margins of child elements. 
*/ 

.clearfix:before, 
.clearfix:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.clearfix:after { 
    clear: both; 
} 

/* 
* For IE 6/7 only 
* Include this rule to trigger hasLayout and contain floats. 
*/ 

.clearfix { 
    *zoom: 1; 
} 

Más información sobre esto se puede encontrar aquí: http://html5boilerplate.com/