Css layout help - 3 column footer

Question

I'm trying to get the footer in my site to look like this:

Wilgrove Baptist Church             Home | About | Ministries            1234 S. Main st.
John G. Smith, Sr. Pastor              Contact Us | Site Map           somwhere, ID 55555

My problem is getting it laid out into the 3 columns. Any suggestions?

Thanks!

Answer 1

I used the following code on my own site.

HTML:

<footer>
    <aside class="footer-left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </aside>

    <aside class="footer-right">
        Aenean elit ante, ultrices ac vestibulum id, tempor id nisi.
    </aside>

    <aside class="footer-center">
        Integer tincidunt, sem at placerat ullamcorper, urna felis condimentum justo.
    </aside>
</footer>

CSS:

footer [class ^= 'footer-'] {
    width: 33.3333%;
    display: inline-block;
    text-align: center;
}

footer .footer-left {
    float: left;
}

footer .footer-right {
    float: right;
}

All content will be center-aligned because that's what I wanted. You can easily change this, though.

Answer 2

Quite easily done using floats:

<div id="footer">
    <p class="left">Left aligned text here<br />Next line here</p>
    <p class="right">Right aligned text here<br />Next line here</p>
    <p class="centered">Center Text here<br />Next line here</p>
</div>

and the CSS:

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