<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>TransformationPowerTools &#187; css</title>
	<atom:link href="http://www.transformationpowertools.com/wordpress/tag/css/feed" rel="self" type="application/rss+xml" />
	<link>http://www.transformationpowertools.com/wordpress</link>
	<description>for personal growth and transformation</description>
	<lastBuildDate>Fri, 20 Jan 2012 13:23:43 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Posts in Columns &#8211; A New Twist on an Old Problem</title>
		<link>http://www.transformationpowertools.com/wordpress/posts-in-columns-a-new-twist-on-an-old-problem</link>
		<comments>http://www.transformationpowertools.com/wordpress/posts-in-columns-a-new-twist-on-an-old-problem#comments</comments>
		<pubDate>Fri, 10 Jun 2011 14:47:15 +0000</pubDate>
		<dc:creator>alchymyth</dc:creator>
				<category><![CDATA[Easy Coding for Wordpress]]></category>
		<category><![CDATA[Tips & Tricks]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[3 column post]]></category>
		<category><![CDATA[columns]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[easy coding]]></category>
		<category><![CDATA[grid]]></category>
		<category><![CDATA[grid style]]></category>
		<category><![CDATA[posts in columns]]></category>

		<guid isPermaLink="false">http://www.transformationpowertools.com/wordpress/?p=1254</guid>
		<description><![CDATA[To organize posts into three columns, you first need to generate a column dependant css class for each post; this will be added to the post div within the loop. The core trick to generate different css classes for posts &#8230; <a href="http://www.transformationpowertools.com/wordpress/posts-in-columns-a-new-twist-on-an-old-problem">Check the whole post <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p>To organize posts into three columns, you first need to generate a column dependant css class for each post; this will be added to the post div within the loop.</p>
<p>The core trick to generate different css classes for posts in the first coliumn, the second column, and the last column:</p>
<pre class="brush: php; title: ; notranslate">&lt;?php $column = ($column == '') ? 'first' : (($column == 'first') ? 'middle' : (($column == 'middle') ? 'last' : 'first' )); ?&gt;</pre>
<p>This line of code needs to be within the loop, just before the post div.</p>
<p>To achieve more or less the same, you could obviously also use a counter variable and the modulus operator, as i have elaborated on in my earlier article <a href="http://www.transformationpowertools.com/wordpress/zebra-style-wordpress-loop">&#8216;More-Than-Zebra style WordPress loop&#8217;</a>. However, the above method is simpler and easier to apply within a single line of code.</p>
<p>The second step is to add this as a css class to the post div:</p>
<p>a &#8211;  assume a theme without the use of &#8216;post_class()&#8217;; the typical opening div would look like:</p>
<pre class="brush: php; title: ; notranslate">&lt;div class=&quot;post&quot; id=&quot;post-&lt;?php the_ID(); ?&gt;&quot;&gt;</pre>
<p>This is changed into:</p>
<pre class="brush: php; title: ; notranslate">&lt;div class=&quot;post &lt;?php echo $column; ?&gt;&quot; id=&quot;post-&lt;?php the_ID(); ?&gt;&quot;&gt;</pre>
<p>b &#8211; in a theme using the &#8216;post_class()&#8217;, the new code would look like:</p>
<pre class="brush: php; title: ; notranslate">&lt;div &lt;?php post_class($column); ?&gt; id=&quot;post-&lt;?php the_ID(); ?&gt;&quot;&gt;</pre>
<p>Third and last step: to tell the browser what to do with the new css classes, add some styles to style.css of the theme:</p>
<pre class="brush: css; title: ; notranslate">/* .first, .middle, .last styling of posts on home page for three column */
.first, .middle, .last { width: 32%; float:left; clear:none!important; }
.first { margin-right: 2%; clear:both!important; }
.middle { margin-right: 2%; }</pre>
<p>Final details depend on the existing theme.</p>
<p>edit &#038; ps:<br />
if you just want to mark the first post in each row &#8211; for instance to add the &#8216;clear:both;&#8217; and a different margin there &#8211; try to work with:<br />
(example for 5 columns)</p>
<pre class="brush: php; title: ; notranslate">
&lt;div &lt;?php $column = ($wp_query-&gt;current_post%5 == 0) ? 'first' : ''; post_class($column); ?&gt; id=&quot;post-&lt;?php the_ID(); ?&gt;&quot;&gt;</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.transformationpowertools.com/wordpress/posts-in-columns-a-new-twist-on-an-old-problem/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
	</channel>
</rss>

