> For the complete documentation index, see [llms.txt](https://docs.feedotter.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.feedotter.com/set-up-your-own-template/advanced-template-information/email-with-columns.md).

# Email With Columns

The classic html email design lays out articles and content in rows. This makes compatibility a breeze and simplifies using data-driven email tools such as FeedOtter.

However, many modern newsletters and email journals prefer to design html emails with columns of content.  There are some special considerations when designing a column-based template for use with FeedOtter.

## Basic Example

A basic example which will layout columns of content.

```html
<!--## [% if feedotter.posts is not empty %] ##-->
<table width="100%"><tr><td width="100%">
	<!--## [% for row in feedotter.posts  | batch(2) %] ##-->
	<tr>
		<!--## [% for post in row|slice(0,1) %] ##-->
		<td>
			//column 1 content
		[[post.post_title]]
		</td>
		<!--## [% endfor %] ##-->
		
		<!--## [% for post in row|slice(1,1) %] ##-->
		<td>
		//column 2 content
		[[post.post_title]]
		</td>
		<!--## [% endfor %] ##-->
	</tr>
	<!--## [% endfor %] ##-->
</td></tr><table>
<!--## [% endif %] ##-->
```

You'll only need to code 1 row of a column layout.  FeedOtter will repeat the row based on the amount of content in your email.

Here's what the code listed above displays in FeedOtter when their are 6 posts available to display.  3 rows of 2 columns each.

<figure><img src="/files/AcX4a0hd5kkMxKPL1U1P" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The **batch** filter on the feedotter.posts loop creates subloops of content divided by the number provided. In this case 2.
{% endhint %}

{% hint style="warning" %}
When using columns it is important that you always supply enough content to fulfill all columns in the design.  If we provided 5 posts to the above design it would likely look terrible when tested in Litmus because column responsiveness is near impossible to create in html email.
{% endhint %}

Use the FeedOtter interface and the Max Posts value to adjust the number of posts displayed in your email.&#x20;

<figure><img src="/files/6baP08iGuZmJfthMCVvH" alt=""><figcaption></figcaption></figure>

####