Ask your WordPress questions! Pay money and get answers fast! (more info)

Need code for a 3-column footer

  • SOLVED

In my footer, I'd like 3 columns; left, middle, and right, to be equally-spaced across the bottom of the site.

This is to be independent of the layout/sidebars going on above in the page template.

I want the text in the left column to be left-justified.
I want the text in the middle column to be centered.
I want the text in the right column to be right-justified.

The left text will be copyright info.
The middle text will be the site contact info.
The right text will be the site credits.

If I put too much text in any of the 3 columns, it should auto-wrap at some point rather than crunching the size of the other 2 columns.

I want to be able to use a break <br> to wrap the text where I choose.

The site currently has the following code in the footer and style sheet, but it's obviously working out. Doesn't look right.

footer.php
<div id="footer">
<div class="left-element">Copyright &copy; 2011 Company Name, Inc.</div>
<div class="middle-element"><strong>Call Now: (355) 535-5335</strong><br>123 Mailing Address St, City, State, Zip</div>
<div class="right-element">Site by: <a href="http://www.developer.com/">Developer Name</a></div>
</div>
<?php wp_footer(); ?>
</body>
</html>


style.css
#footer {
height: 55px;
padding: 2
}

.left-element {
float: left;
width: 33%;
}

.middle-element {
width: 33%;
text align: center;
}

.right-element {
float: right;
width: 33%;
text-align: right; /* depends on element width */
}


Answers (6)

2011-02-27

Chris Lee answers:

Your code has a small error. Text align is text-align and you'll want some space in between each column


#footer {

height: 55px;

padding: 2

}



.left-element {

float: left;
width: 32%;

}



.middle-element {
float: left;
width: 32%;
text-align: center;

}



.right-element {

float: right;

width: 32%;

text-align: right; /* depends on element width */

}

2011-02-27

Rashad Aliyev answers:

I'm available for this. I can also make a special widgets area for this or you can use it from your site admin panel.

My price full of the best solution: 75USD

2011-02-27

Ivaylo Draganov answers:

Purely a CSS issue. And your code could be optimized a bit:

#footer {
height: 55px;
padding: 2px;
}

.left-element,
.right-element,
.middle-element {
float: left;
width: 30.3%;
padding-right: 3%;
}

.middle-element {
text align: center;
}

.right-element {
text-align: right;
}

2011-02-27

Vidyut Kale answers:


.left-element, .middle-element, .right-element {width:30%;}
.left-element {margin: 0 1.25% 0 2.5%;text-align:left}
.middle-element {margin: 0 1.25%;text-align:justify}
.right-element {margin:0 2.5% 0 1.25%; text-align:right}

2011-02-27

Jarret Minkler answers:

You will also need to add a "clear" div after the floats probably



<div style="clear:both"></div>

2011-02-27

S├ębastien | French WordpressDesigner answers:

#footer {
background:#eee;
height: 55px;
padding: 2px;
}
.left-element {
float: left;
width: 33%;
background:blue;
}
.middle-element {
float: left;
width: 33%;
text-align: center;
background:gray;
margin: 0 0.5%;
}
.right-element {
float: right;
width: 33%;
text-align: right; /* depends on element width */
background:red;
}


I have add background-color, that's just to see the resulat.

You had three errors in your code :
padding: 2 must be padding: 2px

text align: center; must be text<strong>-</strong>align: center
text-align, not text align.

and middle-element must float