Блог

Я пытаюсь создать кроссбраузерный нижний колонтитул из 3 столбцов, которые равны по ширине друг другу, но не выходят за пределы основной ширины 900 пикселей. Этот код этого не делает??

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

Самое простое решение, которое я вижу, с вашей текущей разметкой, это:

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

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

Демонстрационная версия JS Fiddle.

Отредактировано, чтобы предложить небольшую правку, поскольку ваш нижний колонтитул div выглядит как список ссылок на другой контент, я бы предложил изменить вашу разметку, используя следующее в качестве рекомендуемого руководства:

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

И 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.

Попробуйте это:

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

для вашего htmll, а это для ваших стилей:

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

Как показано в этой скрипке: http://jsfiddle.net/kLqZP/9 /

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

просто добавьте значение с плавающей запятой слева в каждом столбце, затем упорядочьте div. посмотрим, сработает ли это

Если вы разместите свои <p> они будут брать свою ширину из своего содержимого, они не будут иметь одинакового размера. И, кстати, может div s быть лучшим вариантом для этой задачи, чем <p>