Altlığım neden doğru alanda görünmüyor? CSS'yi etkileyebilir miyim?

Question

Web sitemde, christianselig.com, altbilgim bazı nedenlerden dolayı en yakın yerde göründüğü about.html sayfası (http://christianselig.com/about.html) dışındaki tüm sayfalarda gösterilir.

Sayfa, her ikisi de bir div içeren iki yüzer divtan (bir tane sola, sağdan) oluşuyor, ve ben de yüzerlerin muhtemelen sorun olduğunun farkındayım, ama ne yapacağımı bilmiyorum. İlgili CSS ve HTML aşağıda bulunabilir ve web sitesinde başka şeyler açıkça bulunabilir.

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

Herhangi bir yardım büyük takdir!

Answer 1

Tüm ihtiyacınız mevcut stilleri ile birlikte aşağıdaki eklemektir:

.lr-wrapper { overflow:hidden; } 

more info

Answer 2

Sorununuz lr-wrapper içeridedir. İki öğeniz left-side ve right-side tüm genişliği dolduramaz, diğer kayan öğelerin sığması için arada boşluk bırakmaz.

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

veya bunu doğru şekilde yapabilirsiniz:

Aşağıda kalmak tüm diğer unsurları anlatmak için altbilgi önce clear eklemem gerekiyor, sadece altbilgi div yukarıda bu ekleyerek bunu yapabilir , sonra css bu ekleme ve ederek yüzen kıracak bir şey gerektiğinde sadece sınıf clearfix uygulayabilecektir:

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

bu konuda

fazla bilgi burada bulunabilir: http://html5boilerplate.com/