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!

score 15 · Accepted Answer · answered Jan 20 '09 at 20:39

15

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

answered Jan 20 '09 at 20:39

Jayx

3,896
3
27
37

1

Just a reminder, put the center element last in the HTML output (as Jayx did). If you put the right float after the center (non-float) element, it will be moved below the centered one. – Mindwin Remember Monica Feb 19 '14 at 19:51
This almost works except the center content is centered between the left and right content (which is off-center if the left and right have different widths), rather than centered on the page, which is apparently too much to ask of the perpetually unintuitive CSS. – Jason C Jul 05 '14 at 20:47

score 2 · Answer 2 · edited Oct 10 '12 at 22:08

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.

score 2 · Answer 3 · answered Jan 20 '09 at 20:23

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.

score 2 · Answer 4 · answered Jan 23 '09 at 16:59


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

score 1 · Answer 5 · edited May 23 '17 at 12:07

To have three columns of almost equal width:

HTML:

<div id="footer">
    <p>First section, first line of text<br /> Second line of text</p>
    <p>Second section, first line of text<br /> Second line of text</p>
    <p>Third section, first line of text<br /> Second line of text</p>
</div>

CSS:

#footer > p:first-child {
    float: left;
    text-align: left;
    width: 33.3%; }

#footer > p:nth-child(2) {
    float: left;
    text-align: center;
    width: 33.4%; }

#footer > p:last-child {
    float: right;
    text-align: right;
    width: 33.3%; }

Compared to Jayx's answer, I've simplified the markup and used different selectors in the stylesheet.

Read more about fractional percentage lengths.

score 0 · Answer 6 · answered Feb 01 '11 at 23:27

Actually, the text-align code works other than the fact that you have the text angling toward the end. To fix this, simply apply a margin-top negative value to line up with the left text. Take a look...

#left {
    text-align:left;
}

#right {
    text-align:right;
    margin-top:-35px;
}

#center {
    text-align:center;
    margin-top:-35px;
}

score -2 · Answer 7 · answered Jan 20 '09 at 20:23

-2

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.

answered Jan 20 '09 at 20:23

alex

943
5
7

1

You really shouldn't be using that many divs for something this simple - it's no better than using tables. – Jayx Jan 20 '09 at 21:19

Css layout help - 3 column footer

7 Answers7

HTML:

CSS: