overide zurb foundation float right property for last element - css

Question

I am using Zurb foundation and I am trying to create a css property that will be called and override the property float:right that they give the the last column. I know that they provide the end class to make you able to float a div on the left, but I have a case where I really have to make sure that my css property is the one to be called at the end.
code:
<div class="row">
<div class="my-class small-6 columns">floated on the right by foundation</div>
</div>
.my-class{
float:left;
}
the above code does not work, but it works when I add the important property which is something I want to avoid as well.

Answer 1

I found this question when dealing with dynamic content. In this case, I didn't know how many items I would ultimately have and didn't want to override foundations default behavior. The solution in this case was Foundation's block grid:
http://foundation.zurb.com/docs/components/block_grid.html
As an example, the way I initially tried to implement this was by wrapping each repeating element in a div with that amount of columns it should use like this:
<div class="row">
<div class="columns small-3">content</div>
<div class="columns small-3">content</div>
<div class="columns small-3">content</div>
<div class="columns small-3">content</div>
<div class="columns small-3">content</div> <!-- Floated right. -->
</div>
Instead, the better way to do this is to use Foundation's block grid class, which specifies how many items should be in each row, like this:
<div class="row">
<ul class="small-block-grid-4">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li> <!-- Right where I expected it! -->
</ul>
</div>
Hopefully that help some fellow Googlers. :-)

Answer 2

In HTML/CSS, you need to make sure that your custom class is more specific than the class you're overriding and that your CSS is loaded after Zurb's CSS.
Zurb has the following class;
[class*="column"] + [class*="column"]:last-child {
float: right; }
Which means attribute class contains "column" and is last in parent. To be able to override this, try adding this to the end of your CSS file that is loaded after Zurb's and change the div to <div class="small-6 columns my-class">
[class*="my-class"]:last-child {
float: left;
}