How to replace cycle('float: left', 'float: right') to use pure css?


Tags: html,css,ruby-on-rails,styling

Problem :

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%.



Solution :

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

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

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

    CSS Howto..

    Pesudo Class and Css Role how to apply theme

    How can I vertically center this css/javascript based modal dialog?

    CSS: How to create a background cutout using elements (not images)?

    How to do a footer in dompdf 6.0 beta 2?

    CSS - How to create a table cell with a two-colour background?

    How to create a vertical carousel using plain JavaScript and CSS

    How to make page layout responsive for every successive little change in window size?

    How to place a Show/Hide toggle button next to a header (not under the header)?

    How to change this CSS code to get required layout

    How to get these tables stacked on top of each other?

    Why Does the

    tag creates a black background here? and how do I get rid from the border?

    HTML/CSS/JS: How to force browser to save password from a non-'password' type input?

    How to get css height property of an object and add 20px to it?

    How to fade in and fade out text on a timer using css animations

    How to maintain an icon font from SVG files

    How do I load / unload css changes quickly on a plone + Zope site ? (noob)

    Article container expands to show all content in standard mode, works fine in quirks mode. Only part wrong

    How to unfold or close content in html/JS - always assigned to different id

    How to change opacity in disabled state of image in css

    Third level drop down css wont show & content/links are out of order?

    How to change line height for small text with CSS? There seems to be a limit to how small line-height can be

    how to create bar code like in a horizontal line using css (For Email)

    How to edit the CSS of a selector in Polymer 1.0

    How to apply last-child only for first nested li?

    HTML/CSS/JAVASCRIPT : How to move an element and not show scrollbars

    How can I place html text on top of a canvas flot chart?

    How to create a 3 columns fluid fixed fluid layout?

    How to override Liferay core' css?

    How do I change the opacity of an image when I hover of my text?

    How are the page-break properties in CSS supposed to work?