Pages

Uneven Column In Genesis Framework WordPress Theme

I've been using StudioPress's Genesis Framework on WordPress website. However, I have never seem someone give the example of using uneven columns. So here I go.

I was wondering why there are style named two-sixths. Now I see how to use it. Here is the end result of un-even column in the Genesis Framework Child theme on WordPress blog.


And here is the HTML source code.


<div class="one-third first" style="border:1px solid #ffcc00;">one-third first</div>
<div class="two-thirds" style="border:1px solid #ffcc00;">two-thirds</div>
<hr>
<div class="one-fifth first" style="border:1px solid #ffcc00;">one-fifth first</div>
<div class="two-fifths" style="border:1px solid #ffcc00;">two-fifths</div>
<div class="two-fifths" style="border:1px solid #ffcc00;">two-fifths</div>
<hr>
<div class="one-sixth first" style="border:1px solid #ffcc00;">one-sixth first</div>
<div class="two-sixths" style="border:1px solid #ffcc00;">two-sixths</div>
<div class="one-sixth" style="border:1px solid #ffcc00;">one-sixth</div>
<div class="two-sixths" style="border:1px solid #ffcc00;">two-sixths</div>
<hr>
<div class="two-sixths first" style="border:1px solid #ffcc00;">two-sixths first</div>
<div class="two-sixths" style="border:1px solid #ffcc00;">two-sixths</div>
<div class="one-sixth" style="border:1px solid #ffcc00;">one-sixth</div>
<div class="one-sixth" style="border:1px solid #ffcc00;">one-sixth</div>
<hr>
<div class="two-sixths first" style="border:1px solid #ffcc00;">two-sixths first</div>
<div class="one-sixth" style="border:1px solid #00ccff;">one-sixth</div>
<div class="three-sixths" style="border:1px solid #ccff00;">three-sixths</div>
<div style="clear:both;"></div>

No comments:

Post a Comment

Thank you for your feedback. If you find the tip and trick useful, feel free to share with your friends on Facebook, Twitter and G+!