I am attempting to create two rows of divs using ng-repeat. Each div is styled with a float: left attribute, and at the end, I add a clearing div with clear: both.
<div class="interval" ng-repeat="interval in intervals">
<div class="text-center">
<h2>{{interval}}</h2>
<i class="fa fa-angle-down fa-2x"></i>
</div>
</div>
<div class="clearfix"></div>
<div class="interval" ng-repeat="interval in intervals">
<div class="testBar progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
<div class="clearfix"></div>
Plus, some CSS:
.interval {
width: 500px;
height: 50px;
float: left;
}
You can view it here: https://jsfiddle.net/uyrxd4ag/2/
However, there seems to be an issue where those two rows are overlapping. I'm puzzled because the clear: both div should be preventing this from happening.
Any ideas on what might be going wrong?