CSS Footer Layout Problem
Am trying to create a cross-browser 3 column footer that are equal in width to each other, but doesn't go beyond the main body width of 900px. This code isn't doing it??
html
<div id="footer"&开发者_开发问答gt;
<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;
}
The easiest solution I can see, with your current mark-up, is:
#footer {
width: 900px;
}
#footer > p {
width: 30%;
display: block;
float: left;
}
p:nth-child(odd) {
background-color: #ccc;
}
JS Fiddle demo.
Edited to suggest a slight revision, as your footer
div
appears to be a list of links to other content, I'd suggest amending your mark-up, with the following as a suggested guide:
<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>
And the 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.
Try this:
<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>
for your htmll, and this for your 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;
}
As shown in this fiddle: 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;
> }
just add float left in each column, then arrange the div. see if that works
If you float your <p>
they will take their width from their content, they won't have equal size. And BTW, maybe div
s could be a better option for that task than <p>
精彩评论