How do you create an alternating layout in a template? i.e. an image on right then an image on left I'm a new user so I really don't know how to do this.

I want to create a template that displays the results of a "news" type entry in alternating rows - image on left/text on right - image on right/text on left.

Could someone help in explaining where to put the code and what the code should be?
Personally I'd do this in pure CSS. e.g.,

&lt;div class="item"&gt;
    &lt;img ... /&gt;
    &lt;div class="text"&gt;
        ...
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="item"&gt;
    &lt;img ... /&gt;
    &lt;div class="text"&gt;
        ...
    &lt;/div&gt;
&lt;/div&gt;


CSS:

.item {
    overflow: hidden; // expand around floated children
}
img {
    float: left; width: 50%;
}
.text {
    float: right; width: 50%;
}

.item:nth-of-type(2n) img {
    float: right;
}
.item:nth-of-type(2n) .text {
    float: left;
}