2-columns

Column 1 Contents

Thu sceolde mihte tha thurfe feoh be, sendon frean baed tha oncnawan guthe eart, eorl frith and thu nolde saemannum and. Mid godum folman he, Eadric na nolde the, wordum hwaene he we aet oncnawan na healdan sylfra, waes ar. Beagas man eac of thaer god me on hyssa snelle of he. Taehte hige mid thu sceolde tha him hu se holtes with him frean tha frean.
Clypode het sceolde with, thaet mid. Frith aet healdan secgan feoh gangan hyra stodth eorl beot hearde and to frean, he forth tha gangan getholian maelde, leoda thu se. Onfunde the his taehte bradswurd thaet nolde bord, his secgan frean garraes. Tha and hyra leofne, Byrhtnoth mihte, ricost wordum to beot forth hwile saemannum. Thone handon golde, tha aeraende freode, het tha haefde rincum daelon healdan us his forth mid her se. Waepnum to healdan gangan Byrhtnoth snelle handum ongan ricost thu hafoc tha folc with dom godum.

Pretty good, don't you think?

Column 2

Waepnum, he fleogan na hige tham hafoc rad hyra geraedest we and thaes forth thaet mid sendan afysan hilde. Tha niman thaer lysan beot eart to on. We, hwaene se healdan fleogan his nolde. Hors ofre feor we is ne spedath clypode man guthe grith sylfra forhtedon brimlithendra thaet tha. Eart, se gelaestan let feoh tham rad tham tha. Byrhtnoth eow bord, the stithlice haefde tha on eart gelaeste the hwaene handum.

For this version of the two-column layout, I have included just some plain text. The Raw HTML looks like this:

<div class="colmask rightmenu">

<div class="colleft">

<div class="col1">

<!-- Column 1 start -->

<h2>Column 1 Contents</h2>

<p>Thu sceolde mihte tha thurfe feoh be, sendon frean baed tha oncnawan guthe eart, eorl frith and thu nolde saemannum and. Mid godum folman he, Eadric na nolde the, wordum hwaene he we aet oncnawan na healdan sylfra, waes ar. Beagas man eac of thaer god me on hyssa snelle of he. Taehte hige mid thu sceolde tha him hu se holtes with him frean tha frean.<br />Clypode het sceolde with, thaet mid. Frith aet healdan secgan feoh gangan hyra stodth eorl beot hearde and to frean, he forth tha gangan getholian maelde, leoda thu se. Onfunde the his taehte bradswurd thaet nolde bord, his secgan frean garraes. Tha and hyra leofne, Byrhtnoth mihte, ricost wordum to beot forth hwile saemannum. Thone handon golde, tha aeraende freode, het tha haefde rincum daelon healdan us his forth mid her se. Waepnum to healdan gangan Byrhtnoth snelle handum ongan ricost thu hafoc tha folc with dom godum.</p>

<h3>Pretty good, don't you think?</h3>


<!-- Column 1 end -->

</div>

<div class="col2">

<!-- Column 2 start -->

<h2>Column 2</h2>

<p>Waepnum, he fleogan na hige tham hafoc rad hyra geraedest we and thaes forth thaet mid sendan afysan hilde. Tha niman thaer lysan beot eart to on. We, hwaene se healdan fleogan his nolde. Hors ofre feor we is ne spedath clypode man guthe grith sylfra forhtedon brimlithendra thaet tha. Eart, se gelaestan let feoh tham rad tham tha. Byrhtnoth eow bord, the stithlice haefde tha on eart gelaeste the hwaene handum.</p>

<!-- Column 2 end -->

</div>

</div>

</div>


In addition to the Raw HTML, you need some styling instructions, courtesy of CSS. This should be placed with either Site Code Injection, or Page Code Injection, depending on your requirements. Amongst other things, the CSS defines the width of each column.

You can download the required CSS as a plain text zipped file here.

The percentages used in the CSS can be adjusted to match your own needs, of course.

© David Neale 2011