float right always brings div to the bottom right

Here's a sample fiddle with an example of my code:

http://jsfiddle.net/V5KHy/2/

The issue I have is with a div with class:

col r no-padding

and in the computed css it evaluates to this:

.cols.two.alt > .col.r {
      padding: 0 10px;
      float: right;
      width: 27%;
}

why is it that now this div located on the bottom right instead of the top next to the first ul?

It's happening because of the order in which you've placed the elements in your HTML. When you float an element, it only floats relative to what comes after it, not what comes before it. So when you have a structure like this:

<ul>
    <!-- stuff -->
</ul>
<div style='float: right;'>
    <!-- stuff -->
</div>

the div will always appear below the ul, because that's how they're organized in the HTML markup. If you want the div to be to the right of the ul, then you need to change the order:

<div style='float: right;'>
    <!-- stuff -->
</div>
<ul>
    <!-- stuff -->
</ul>

And that will put the div to the right of the ul. Always remember, if you're floating content, it has to float before the thing you want it to be next to.