Question

Is there any way to replace cycle('float: left', 'float: right') so that instead of using cycle helper i could use pure css classes. I need to align divs left and right inside a single column. Using cycle leads to some difficulties with caching so it would be better to use static styling instead.

<div class="userCards">
    <div class="singleCard <%= cycle 'cardLeft', 'cardRight' %>">
        <!-- content -->
    </div>
</div>

Note that userCard has fixed height, overflow: hidden and width: 48%.

Answer 1

Sounds like a work for nth-child() selector:

.userCards .singleCard:nth-child(odd) {
  float: left;
}

.userCards .singleCard:nth-child(even) {
  float: right;
}