Reply To: Price Plan Not Showing Correctly

I’m very glad to say that I got it right! Some time away from the computer helped a lot.

For people who want to do something similar in the future:

I added some css code for three columns and changed the existing one to four columns:

.plan-col-four, 
.plan-col-popular-four {		
	width: 25%;
}

.plan-col-three, 
.plan-col-popular-three {		
	width: 33%;
}

Then in code if I want to use three columns I would do the following:

<div class="plans">
<div class="plan-col plan-col-three">
	<div class="plan-col-wrap">
		<div class="plan-head"><h4>Simple</h4></div>
		<div class="plan-pricing">
			<span class="plan-price"><sup>$</sup>45</span><span class="monthly">/mo</span>
		</div>
		<ul class="plan-list">
			<li><strong>100</strong> Themes</li>
			<li><strong>Unlimited</strong> Bandwidth</li>
			<li><strong>300</strong> E-mail Accounts</li>
			<li><strong>Free</strong> 1-800 Number</li>
			<li><strong>5 Free</strong>Domains</li>
			<li><strong>Unlimited</strong> Downloads</li>
		</ul>
		<div class="plan-button"><a>Buy Now</a></div>
	</div>
</div>	
	
<div class="plan-col-popular plan-col-popular-three">
	<div class="plan-col-wrap">
		<div class="plan-head"><h4>Popular</h4></div>
		<div class="plan-pricing">
			<span class="plan-price"><sup>$</sup>59</span><span class="monthly">/mo</span>
		</div>
		<ul class="plan-list">
			<li><strong>200</strong> Themes</li>
			<li><strong>Unlimited</strong> Bandwidth</li>
			<li><strong>300</strong> E-mail Accounts</li>
			<li><strong>Free</strong> 1-800 Number</li>
			<li><strong>5 Free</strong>Domains</li>
			<li><strong>Unlimited</strong> Downloads</li>
		</ul>
		<div class="plan-button"><a>Buy Now</a></div>
	</div>
</div>

<div class="plan-col plan-col-three">
	<div class="plan-col-wrap">
		<div class="plan-head"><h4>Great</h4></div>
		<div class="plan-pricing">
			<span class="plan-price"><sup>$</sup>99</span><span class="monthly">/mo</span>
		</div>
		<ul class="plan-list">
			<li><strong>300</strong> Themes</li>
			<li><strong>Unlimited</strong> Bandwidth</li>
			<li><strong>300</strong> E-mail Accounts</li>
			<li><strong>Free</strong> 1-800 Number</li>
			<li><strong>10 Free</strong>Domains</li>
			<li><strong>Unlimited</strong> Downloads</li>
		</ul>
		<div class="plan-button"><a>Buy Now</a></div>
	</div>
</div>

</div>
<!--formatted-->

One can then do something similar for two columns and so forth.