divs won't horizontally align in CSS - html

Question

So I am having trouble aligning 3 divs that are circles on my page.
Here is the HTML
<div class="row">
<div class="large-9 push-2 columns">
<div class="green"></div>
Donnez
</div>
<div class="row">
<div class="large-9 push-4 columns">
<div class="cyan"></div>
Recevez
</div>
</div>
<div class="row">
<div class="large-9 push-6 columns">
<div class="orange"></div>
Statistique
</div>
</div>
</div>
Here is the CSS :
.green, .cyan, .orange {
border-radius: 50%;
width: 15px;
height: 15px;
position: relative;
float: left;
}
.green {
background: #40b564;
}
.cyan {
background: #61cfcc;
}
.orange {
background: #f8765c;
}
Here is what it looks like :
http://4.ii.gl/V0DOyL.png
I basically want the 3 circles (3 divs) to be aligned properly horizontally. Now I have tried display : inline-block; and other things but nothing seems to work. I don't know if this has anything to do with the fondation framework ? I have been trying to figure this out for hours now, any help would be greatly appreciated !

Answer 1

You have them in seperate class="rows" that is why they are in seperate lines.
You have to place them in one Row.
<div class="row">
<div class="large-4 columns">
<div class="green"></div>
Donnez
</div>
<div class="large-4 columns">
<div class="green"></div>
Donnez
</div>
<div class="large-4 columns">
<div class="green"></div>
Donnez
</div>
</div>
Try this in your code, upload a new snapshot, I will see if I can help anymore.
Another Mistake I noticed is that (Not Related to your current layout):
<div class="large-9 push-6 columns">
<div class="orange"></div>
Statistique
</div>
You are doing large-9 push-6, the total should not be more than 12. In you case it is 9+6=15, it should be like large-9 push-3, large-8 push-4 or large-6 push-6 so that total is always 12