Column Functionality
A simple type of columns are available in Perfect Layout. Each one is about 50% of the width of the container it is in. You can also use columns inside columns.
This is the left column. You can put pretty much anything in this that you want.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas in neque. Vivamus posuere, purus eget vehicula aliquam, nunc massa vulputate justo, imperdiet posuere odio orci eu tortor. Sed pulvinar ullamcorper purus. Etiam et lectus. Mauris nec augue et lorem ultrices interdum. Pellentesque in metus rhoncus nulla condimentum tincidunt. Aliquam justo. Donec rutrum scelerisque nibh. Suspendisse hendrerit elit ut nisi varius porta. Aenean vehicula imperdiet augue. Curabitur in orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam nec eros. Morbi commodo neque quis risus. Sed malesuada tortor vitae nisi. Aliquam erat volutpat.
This is the right column. It's the same as the left column except that it's on the right.
Vestibulum orci lorem, aliquam eget, bibendum et, facilisis vitae, neque. Ut nisi nibh, laoreet a, lobortis venenatis, laoreet quis, leo. Morbi libero arcu, cursus et, pellentesque vel, pretium non, lacus. Vivamus erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed elementum. Curabitur sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque feugiat porta mi. Integer erat. Vivamus arcu diam, rutrum tristique, tempus et, lacinia non, pede. Fusce quis dolor. Etiam pulvinar massa sit amet nunc. Sed massa libero, facilisis non, adipiscing sodales, tristique a, diam. Suspendisse nec purus a diam scelerisque dictum. Vivamus lobortis sem. Donec vestibulum nibh adipiscing tortor.
Here's an example of using a set of columns inside a set of columns.
Etiam interdum. Maecenas eros tortor, lobortis quis, euismod ut, auctor quis, tortor. Etiam egestas urna nec erat. Morbi sit amet nisl. Nam mattis, nisl nec fermentum fermentum, nisi sapien varius magna, at volutpat libero orci quis lacus. Nam tristique. Donec eget velit. Aenean felis libero, dignissim eget, condimentum eget, blandit sed, massa. Suspendisse eu ipsum. Ut elit metus, blandit et, molestie vestibulum, tincidunt ac, turpis. Mauris quis nunc. Nulla cursus fermentum nisl. Suspendisse augue. Ut volutpat consequat felis. Quisque quis nunc. Aliquam dignissim, ligula non congue aliquam, tortor nunc tincidunt ligula, id consectetuer pede lacus at neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer malesuada aliquam nisi. Donec commodo fermentum metus. Vestibulum erat metus, laoreet mattis, semper sed, consequat id, augue.
This is the inner left column.
Integer in enim a eros lacinia molestie. Nullam eget lectus. Sed dapibus diam ut dolor. Duis mattis. Sed id turpis. Aliquam in mi a nisl porttitor interdum.
This is the inner right column.
In volutpat venenatis dui. In mauris leo, vehicula vel, varius et, hendrerit vitae, enim. Donec sit amet nisl. Sed nunc pede, iaculis nec, pharetra vel, laoreet in, lectus.
Relevant HTML
<div class="half"> <div class="leftColumn"> <p>Left column text.</p> </div> <div class="rightColumn"> <p>Right column text.</p> </div> <div class="clearBoth"></div> </div>
Relevant CSS
.half
{
clear:both;
width:100%;
}
.half .leftColumn
{
float:left;
width:49%;
}
.half .rightColumn
{
float:right;
width:49%;
}