CODEWITHSUNDEEP
css
Micah
Micah

Reputation: 116090

Css layout help - 3 column footer

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!

Upvotes: 9

Views: 45867

Answers (7)

shea
shea

Reputation: 1166

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.

Upvotes: 2

Daze
Daze

Reputation: 488

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.

Upvotes: 1

Tabetha Moe
Tabetha Moe

Reputation: 480

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

Upvotes: 0

Tab Atkins-Bittner
Tab Atkins-Bittner

Reputation: 18363


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

Upvotes: 2

Jayx
Jayx

Reputation: 3966

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

Upvotes: 15

George Stocker
George Stocker

Reputation: 57877

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.

Upvotes: 2

alex
alex

Reputation: 953

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.

Upvotes: -2

Related Questions