<p>Personally I'd do this in pure CSS. e.g.,</p>

<pre><code>&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;
</code></pre>

<p>CSS:</p>

<pre><code>.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;
}
</code></pre>

CC BY-SA 3.0
2015-12-06T18:10:56.633Z
2015-12-06T18:10:56.633Z
Matt Wilcox
<p>I'm a new user so I really don't know how to do this.</p>

<p>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.</p>

<p>Could someone help in explaining where to put the code and what the code should be?</p>

<templating>
How do you create an alternating layout in a template? i.e. an image on right then an image on left
# How do you create an alternating layout in a template? i.e. an image on right then an image on left

(Asked by: username_0 on 2015-12-06)

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?

**Tags:** templating


---

## 1 answers

### Answer by username_1 on 2015-12-06. Score: 3

Personally I'd do this in pure CSS. e.g.,

    
    
        ...
    


    
    
        ...
    


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;
}


---

