Dlaczego moja stopka nie pojawia się w odpowiednim obszarze? Czy mogę wpływać na CSS?

Question

Na mojej stronie internetowej christianselig.com moja stopka pojawia się na wszystkich stronach z wyjątkiem strony about.html (http://christianselig.com/about.html), w której pojawia się w pobliżu szczytu z kilku powodów.

Strona składa się z dwóch pływających elementów div (jeden po lewej, jeden po prawej) z elementem div owijającym oba elementy i zdaję sobie sprawę, że te obiekty są prawdopodobnie problemem, ale nie mam pojęcia, co robić. Odpowiednie CSS i HTML można znaleźć poniżej, a inne rzeczy są oczywiście dostępne bezpośrednio na stronie.

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; 
     } 

Każda pomoc będzie bardzo mile widziane!

Answer 1

Wystarczy dodać następujące wraz z istniejących stylów:

.lr-wrapper { overflow:hidden; } 

more info

Answer 2

Twój problem jest w środku lr-wrapper. Twoje dwa elementy: left-side i right-side nie wypełniają całej szerokości, pozostawiając spację między innymi, aby zmieściły się inne elementy pływające.

Trzeba dodać clear przed stopce, aby poinformować wszystkich innych elementów pozostać poniżej, można to zrobić poprzez dodanie tego tuż nad div stopki:

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

czy można zrobić to we właściwy sposób , dodając to do CSS, a następnie być w stanie po prostu zastosować klasę clearfix kiedy trzeba coś złamać pływające:

/* 
* 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; 
} 

Więcej informacji na ten temat można znaleźć tutaj: http://html5boilerplate.com/