Skip to content

Instantly share code, notes, and snippets.

@senlin
Created June 28, 2012 14:19
Show Gist options
  • Save senlin/3011643 to your computer and use it in GitHub Desktop.
Save senlin/3011643 to your computer and use it in GitHub Desktop.
Add up to 6 columns to Basejump WordPress Theme
<p>One column full width content</p>
<div class="one-half first">Two columns full width content </div>
<div class="one-half">Two columns full width content </div>
<div class="one-third first">Three columns full width content </div>
<div class="one-third">Three columns full width content </div>
<div class="one-third">Three columns full width content </div>
<div class="one-fourth first">Four columns full width content </div>
<div class="one-fourth">Four columns full width content </div>
<div class="one-fourth">Four columns full width content </div>
<div class="one-fourth">Four columns full width content </div>
<div class="one-fifth first">Five columns full width content </div>
<div class="one-fifth">Five columns full width content </div>
<div class="one-fifth">Five columns full width content </div>
<div class="one-fifth">Five columns full width content </div>
<div class="one-fifth">Five columns full width content </div>
<div class="one-sixth first">Six columns full width content</div>
<div class="one-sixth">Six columns full width content</div>
<div class="one-sixth">Six columns full width content </div>
<div class="one-sixth">Six columns full width content </div>
<div class="one-sixth">Six columns full width content </div>
<div class="one-sixth">Six columns full width content </div>
And we can get completely nuts with this, for example by doing this:
<div class="one-sixth first">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
<div class="one-half">Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, , id pulvinar odio lorem non turpis. Nullam sit amet enim.</div>
<div class="two-sixths">Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, suspendisse id velit vitae ligula volutpat condimentum.</div>
<div class="clear"></div>
Or by going with something a bit irregular:
<div class="one-fourth first">Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.</div>
<div class="one-sixth">&nbsp;</div>
<div class="one-fifth">Id pulvinar odio lorem non turpis. Nullam sit amet enim. Aliquam erat volutpat.</div>
<div class="one-third">Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, suspendisse id velit vitae ligula volutpat condimentum.</div>
<div class="clear"></div>
The variations are endless!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment