CSS columns aren't aligning up - html

Question

So I've been racking my brains over this CSS for a while now, need someone to look over it with a fresh set of eyes... Basically what's happening is that I have 4 columns which sit next to each other in the Footer, but the last column is automatically shifting underneath the 3rd column. I can't see what's happening to make it do that?!
Check out the link below:
test.snowflakesoftware.com
Below is the CSS:
#mod_footer {
width: 100%;
background: url(images/footer.jpg);
background-position: center top;
background-repeat: no-repeat;
background-color: #212530;
}
.mod_footer_container {
margin: 0 auto;
width: 1200px;
padding-top: 25px;
}
.mod_footer_col {
float: left;
width: 25%;
padding-right: 25px;
}
#mod_footer_col_end {
float: left;
width: 25%;
}
#nav-bottom-left,
#nav-bottom-left ul {list-style-image: url(images/bullet.png); font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; color: #FFF;}
#nav-bottom-left a {}
#nav-bottom-left li {margin-left: 25px;}
#nav-bottom-right,
#nav-bottom-right ul {list-style-image: url(images/bullet.png); font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; color: #FFF;}
#nav-bottom-right a {}
#nav-bottom-right li {}
p.footer_title {color: #9bcbf3;}
p.footer {font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; line-height: 18px; color: #FFF;}
p.footer .menu-item {list-style-image: url(http://www.snowflakesoftware.com/wp-content/themes/images/bullet.png);}
.mod_footer_container_bottom {
clear: both;
margin: 0 auto;
width: 1200px;
padding-top: 25px;
padding-bottom: 25px;
}
#mod_footer_bottom_col {
width: 100%;
}
And below is the HTML:
<div id="mod_footer"><footer>
<div class="mod_footer_container">
<div class="mod_footer_col">
<p class="footer_title">Quick Links</p>
<br />
<div id="nav-bottom-left" class="nav"><nav>
<p class="footer"><?php wp_nav_menu( array('theme_location' => 'footer-menu-one' )); /* editable within the Wordpress backend */ ?></p>
</nav></div><!--#nav-bottom-left-->
</div><!--mod_footer_col-->
<div class="mod_footer_col">
<p class="footer_title">In our Labs</p>
<br />
<div id="nav-bottom-right" class="nav"><nav>
<p class="footer"><?php wp_nav_menu( array('theme_location' => 'footer-menu-two' )); /* editable within the Wordpress backend */ ?></p>
</nav></div><!--#nav-bottom-right-->
</div><!--mod_footer_col-->
<div class="mod_footer_col">
<p class="footer_title">Become a Partner</p>
<br />
<p class="footer">We're always looking for new partners to team up with in order to encourage and facilitate the use of geospatial data and components within mainstream IT systems. Want to join us? All you need to do is contact us and we can get the ball rolling...</p>
<br />
<p class="footer">Join our Partner Programme</p>
</div><!--mod_footer_col-->
<div id="mod_footer_col_end">
<p class="footer">Interoperable data exchange via open standards - It's what we're all about.</p>
<br />
<p class="footer">Whether you want to load OS MasterMap, publish INSPIRE compliant data or know how to deliver AIXM via web services or any other GML data, we can help. Our software is enabling geographic information specialists around the world to easily load, publish, visualise and share geospatial data....</p>
</div><!--mod_footer_col_end-->
</div><!--mod_footer_container-->
<div class="mod_footer_container_bottom">
<div id="mod_footer_bottom_col">
<p class="footer">© <?php echo date("Y") ?> <?php bloginfo('name'); ?>. <?php _e('All Rights Reserved.'); ?></p>
</div><!--mod_footer_bottom_col-->
</div><!--mod_footer_container_bottom-->
</footer></div><!--mod_footer-->
As you can see by visiting the link, the 4th column starts with the words 'Interoperable data exchange via open standards'
Hope someone can help!
Thanks!

Answer 1

Your cols are all 25% width. So 4 of them should make up 100% of the width of the footer.
Where you've gone wrong is adding the padding of 25px to them. So your essentially saying 100% + 75px which is forcing your last col to do what it's doing.
Either do your measurements in pixels as you know the width of the footer and subtract the 25px padding from the width or do it all in percentages but make sure the width + padding isn't > 100%.

Answer 2

I agree with Spacebeer's answer, here is an alternative solution to the problem:
css3 box-sizing: http://css-tricks.com/box-sizing/
Using this as
.mod_footer_col{box-sizing:border-box;}
would allow you to keep the padding.
Note: this doesn't work in ancient browsers. (ie7)

Answer 3

Remove padding-right:25px from .mod_footer_col as your columns have width 25% each. And this 25px padding when added in 25% columns width it pushes your 4th column down.
You can add padding in p.footer to keep spacing between columns paragraphs.