evenly distribute divs in footer - html

Question

I have a footer in my webpage which nests 3 divs with twitter bootstraps span4 class. I want to have the 'Connect With Us' the same distance from the right as the 'Contact Us' header is from the left and the 'Useful Links' in the middle with all the text for each div left justified underneath.
This is what I have so far:
You can see that Contact Us is closer to the left edge than Connect With Us is from the right edge.
I have tried using text align for the headers which works however the list items below do not left align with the elements.
Here is an image which shows what it is like with the text-align on the headers. You can see that they are laid out as I want but the content below them is not left aligned with them:
Here is the HTML for the footer:
<footer class="footer">
<div class="row-fluid">
<div class="span12">
<div class="span4" id="leftFooter">
<h5><b>Contact Us</b></h5>
<ul>
<li>Tel: [phone]</li>
<li>E-mail: info#oom.com</li>
</ul>
</div>
<div class="span4" id="middleFooter">
<div class="middle"><h5><b>Useful Links</b></h5>
<ul>
<li>Contact Us</li>
<li>About Us</li>
<li>Copyright Information</li>
<li>Terms & Conditions</li>
</ul> </div>
</div>
<div class="span4" id="rightFooter">
<h5><b>Connect With Us</b></h5>
<ul>
<li><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px"> Facebook</li>
<li><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px"> Twitter</li>
</ul>
</div>
</div>
</div>
</footer>
Here is the CSS for the footer:
.footer {
padding: 10px;
position: relative;
color: #ccc2a0;
background-color: #333333;
height: 150px;
clear:both;
padding-top:20px;
}
.footer ul {
list-style: none;
padding: 0;
margin: 0;
}
#leftFooter {
color: #ccc2a0;
padding-left: 50px;
}
#middleFooter {
color: #ccc2a0;
/* text-align: center; */
}
#rightFooter {
padding-right: 50px;
/*text-align: right; */
color: #ccc2a0;
}
#rightFooter li {
padding-top: 5px;
}
.follow { line-height: 19px; }
Can anyone help?
Thanks
EDIT:
Here are the changes I made to the right footer:
<div class="span4" id="rightFooter">
<div class="trow"> <h5 class="tcell"><b>Connect With Us</b></h5> </div>
<ul>
<div class="trow"> <li class="tcell"><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px"> Facebook</li> </div>
<div class="trow"> <li class="tcell"><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px"> Twitter</li> </div>
</ul>
</div>
CSS:
.trow {
display: table-row;
background-color: green;
margin-right: 0;
}
.tcell {
display: table-cell;
background-color: green;
}
.trow h5 {
display: table-row;
background-color: yellow;
}
and here is what it looks like with the rows and cells coloured:

Answer 1

You can use display: table-cell to make the block behave as table cells, which can style further to make them the same width.
You can also float the blocks or use display: inline-block and give each block a third of the width, but when zooming you may get rounding errors that can cause the last block to jump to the next line. When the block behave like table-cells, you don't have that problem.

Answer 2

I renamed some of your CSS ids and removed some markup in your HTML like the b tag (not sure why you were using that). Your ampersand & should be &.
Added a couple DIVs .outer and .inner that center the contents of the second .span4 but maintain the left alignment. The main thing there is the float: left; on .outer which sets the width of .outer to it's content. You could also use display: inline-block; instead of float: left;. .outer is moved left 50% of it's container and then .inner is moved right 50% of it's container (.outer). In the end it ends up in the center of .span4.
For the third .span4 we added a DIV with the class .pull-right which is from your Twitter Bootstrap that floats things to the right. This sets everything to the right side of the third .span4 without re-aligning your text.
.footer {
padding: 10px;
position: relative;
color: #ccc2a0;
background-color: #333333;
height: 150px;
clear:both;
padding-top:20px;
}
.footer ul {
list-style: none;
padding: 0;
margin: 0;
}
#contact-us {
padding-left: 50px;
}
.outer {
position: relative;
left: 50%;
float: left;
}
.inner {
position: relative;
right: 50%;
}
#connect-with-us {
padding-right: 50px;
}
#connect-with-us li {
padding-top: 5px;
}
#connect-with-us a {
padding-left: 5px;
}
.follow {
line-height: 19px;
}
<footer class="footer">
<div class="row-fluid">
<div class="span12">
<div id="contact-us" class="span4">
<h5>Contact Us</h5>
<ul>
<li>Tel: [phone]</li>
<li>E-mail: info#oom.com</li>
</ul>
</div>
<div class="span4">
<div class="outer">
<div class="inner">
<h5>Useful Links</h5>
<ul>
<li>Contact Us</li>
<li>About Us</li>
<li>Copyright Information</li>
<li>Terms & Conditions</li>
</ul>
</div>
</div>
</div>
<div id="connect-with-us" class="span4">
<div class="pull-right">
<h5>Connect With Us</h5>
<ul>
<li><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px">Facebook</li>
<li><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px">Twitter</li>
</ul>
</div>
</div>
</div>
</div>
</footer>