div tags not aligned properly

I get a weird problem with the div tags actually these div tags are aligned and grouped in a single container but the problem something really stupid here is my code

<html>
<head>
<style>
    body {
        padding: 0 2%;
    }
    #footer {
     width: 100 %;
        clear: both;
        border: 1px solid #CCC;
    }
    #footer .col_one {
        float: left;
        width: 25%;
        border: 1px solid #CCC;
    }
    #footer .col_two {
        float: left;
        width: 25%;
        border: 1px solid #CCC;
    }
    #footer .col_three {
        float: left;
        width: 24%;
        border: 1px solid #CCC;
    }
    #footer .col_four {
        float: left;
        width: 25%;
        border: 1px solid #CCC;
    }
</style>
</head>
<body>
    <div id="footer">
        <div class="col_one">
            &nbsp; something here
        </div>
        <div class="col_two">
            &nbsp; something here
        </div>
        <div class="col_three">
            &nbsp; something here
        </div>
        <div class="col_four">
            &nbsp; something here
        </div>
        <div style="clear: both">
        </div>
    </div>
</body>
</html>

Now in the #footer .col_three when I make the width to 24% they display all the boxes in right order but then I make it 25% the last one goes just below the first box why is that so? The total footer container is 100% and there are four div boxes made 25% each in width where am I wrong hope you understand and sorry for bad english.

Solution

That's because the width you set, is the width of the content, excluding padding, margin and borders. So the total width is 100% + 8px (for 1px borders on each side of 4 divs). Therefor it won't fit.

You can solve this by putting extra divs in the div. The outer div you make 25% wide without borders. The inner div, you can give a border, but no explicit width, so it will fill its parent:

http://jsfiddle.net/GolezTrol/fm7LV/1/

I took the liberty of modifying the selectors a little by putting separate classes on those divs: col one instead of col_one. That way, you can use the .col selector for all columns and the .col.one selector in case you need to style a specific column. :)