Need code for a 3-column footer WordPress
- 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 © 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)
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 */
}
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
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;
}
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}
Jarret Minkler answers:
You will also need to add a "clear" div after the floats probably
<div style="clear:both"></div>
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