Random element selector

Apply float:left or float:right to a figure image upon page load.

HTML

<figure class="green random">
    <img src="http://placeimg.com/100/100/any" alt="" />
</figure>
<figure class="blue random">
    <img src="http://placeimg.com/100/100/any" alt="" />
</figure>
<figure class="blue random">
    <img src="http://placeimg.com/100/100/any" alt="" />
</figure>
<figure class="green random">
    <img src="http://placeimg.com/100/100/any" alt="" />
</figure>

CSS

/* general */
 figure.green, figure.blue {
    width: 50%;
    height: 150px;
    float:left;
    margin-bottom: 10px;
}
figure.green img, figure.blue img {
    width: auto;
    height: 100%;
}
/* This must be included */
 figure.green {
    background: green;
}
figure.blue {
    background: blue;
}
/* any figure with a '.random' class will randomly select between: */
 {
    float:left;
}
/* or */
 {
    float:right;
}
/* irrelevent */
 html, body, img, figure {
    padding: 0;
    margin: 0;
}

JavaScript

$('.random').css("float", function () {
    var floats = ["left", "right"];
    var rand = Math.floor(Math.random() * floats.length);
    return floats[rand];
});