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

Try this:

<div style="float:left; padding:10px;">left</div>
<div style="float:left; padding:10px;">center</div>
<div style="float:left; padding:10px;">right</div>

You can adjust the padding, etc. accordingly.

Answer 2

Here are a list of three column CSS layouts. Alistapart.com also has an article on it.

I'd recommend reviewing the 'Three Column CSS layouts' list; each link goes into detail about what it looks like from a 'Newspaper Layout' standpoint, as well as the advantages and disadvantages of each. I used it for a three column layout for the site I'm maintaining.

Answer 3

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

Answer 4

<div id="footer">
  <div>foo</div>
  <div>bar</div>
  <div>baz</div>
</div>

#footer { display: table; width: 100%; table-layout: fixed; }
#footer > div { display: table-cell; }

This won't work in IE 7 and prior, though. In that case I recommend serving them (through IE conditional comments) markup similar to alex, where you use simple floats. These won't center properly, but they'll certainly work, and as people upgrade to IE8 or a better browser they'll automatically upconvert to the display:table solution.

Answer 5

3 column layout generator