Problème de mise en page de pied de page CSS

Question

Je tente de créer un pied de colonne de 3 colonnes de largeur égale, mais qui ne dépasse pas la largeur de corps principale de 900 pixels. Ce code ne le fait pas ??

html 
<div id="footer"> 
    <p class="left">About<br />Contact<br />Next line here</p> 
    <p class="right"> does not evaluate or guarantee the accuracy</p> 
<p class="centered">Terms<br />Privacy<br />Disclaimer</p> 
</div> 

css 
#footer { 
    color: #ffffff; 
    width:100%; 
    background: #111; 
    clear: both; 
    overflow: auto; 
    } 

.left { 
text-align:left; 
float:left; 
} 

.right{ 
float:right; 
text-align:right; 
} 

.centered{ 
text-align:center; 
} 

Answer 1

La solution la plus simple que je peux voir, avec votre marge actuelle, est:

#footer { 
    width: 900px; 
} 
#footer > p { 
    width: 30%; 
    display: block; 
    float: left; 
} 

p:nth-child(odd) { 
    background-color: #ccc; 
} 

JS Fiddle demo.

---

Edité pour suggérer une légère révision, que votre pied de page div semble être une liste de liens vers d'autres contenus, je vous suggère de modifier votre marge, avec comme guide suggéré:

<div id="footer"> 
    <ul> 
     <li>menu one 
      <ul> 
       <li>About</li> 
       <li>Contact</li> 
       <li>Next line here</li> 
      </ul></li> 
     <li>menu two 
      <ul> 
       <li>Does not evaluate, or guarantee the accuracy</li> 
      </ul></li> 
     <li>menu three 
      <ul> 
       <li>Terms</li> 
       <li>Privacy</li> 
       <li>Disclaimer</li> 
      </ul></li> 
    </ul> 
</div> 

Et le CSS:

#footer { 
    width: 900px; 
    overflow: hidden; 
} 

#footer > ul { 
    width: 100%; 
} 

#footer > ul > li { 
    width: 30%; 
    display: block; 
    float: left; 
    font-weight: bold; 
} 

#footer > ul > li > ul { 
    font-weight: normal; 
} 

JS Fiddle demo.

Answer 2

Si vous flottez votre <p> ils prendront leur largeur de leur contenu, ils n'auront pas la même taille. Et BTW, peut-être div s pourrait être une meilleure option pour cette tâche que <p>

Answer 3

Essayez ceci:

<div id="footer"> 
    <div class="left">About<br />Contact<br />Next line here</div> 
    <div class="right"> does not evaluate or guarantee the accuracy</div> 
<div class="centered">Terms<br />Privacy<br />Disclaimer</div> 
</div> 

pour votre htmll, et ceci pour vos styles:

#footer { 
    color: #ffffff; 
    width:100%; 
    background: #111; 
overflow: auto; 
    } 
#footer div { 
width:33%; 
} 
.left { 
text-align:center; 
float:left; 
} 

.right{ 
float:right; 
text-align:center; 
} 

.centered{ 
text-align:center; 
    float:left; 
} 

Comme le montre ce violon: http://jsfiddle.net/kLqZP/9/

Answer 4

html

> <div id="footer"> 
>   <p class="left">About<br />Contact<br />Next line here</p> 
>   <p class="centered">Terms<br />Privacy<br />Disclaimer</p> 
>   <p class="right"> does not evaluate or guarantee the accuracy</p> 
>  
>  </div> 
>  
>  css 
>  #footer { 
>  color: #ffffff; 
>  width:100%; 
>  background: #111; 
>  clear: both; 
>  overflow: auto; 
>  } 
>  
>  .left { 
>  text-align:left; 
>  float:left; 
>  } 
>   .centered{ 
>  text-align:center; 
>  float:left; } 
> 
>  .right{ 
>  float:left; 
>  text-align:right; 
>  } 

juste un dd flotter à gauche dans chaque colonne, puis arranger la div. voir si cela fonctionne