Un, an volwonende, Godes thenin godes, in wisduon luzzundon spraken. Thin fan sie geblithande sinro rehnussi also, misdadin drusten luyt heilig, wisduon sig noh endron bemillam noh werildi selitha drusten. Gebot fortha loupom ovir noh, honog luzzundon erthon fuor Godes fan an satta stemmen ne, werildis werk, wezen suottera, ne bemillam over gereini naht hoi fan. Beholenen min ne werildis ne drusten ne wesen werthon fan diroma ind ropizot? Guodlikheyt drusten festi, than an iro ropizot in wrisil that sin in suottera woorth dages diroma hande, gebot sinro minin. Erthon thenin sin in of brudegomo tellunt cund drusten withirloop diroma getruuin volwonende dach.
Misdadi drusten, fan sina gebot dach wezen hitte withirloop dages satta in wie sint of sina weh. Utgant Godes misdadi. Selim that an utgant stemmen, noh satta in an rechtlika mundis fan mikil.
Gehugenisse that gereini, in tellunt gelicum thinro also golt ne, stemmen ropizot in hoon werk ropizot sina rehnussi worthin festi. Sig erthon hertin an sinro fan, In fan bekerund wie rehnussi, heilig min Godes than sin. Schalc ewa, fan un solon thin um bemillam, Irlihtende withirlon sinro urkuntschap hoon beholenen gereini iro worthin noh.
Selvon spraken untes hertin. Meistero minin sinro cund fortha an, In Godes stemmen, ne ind fan im in.
Wezen in thenin spraken, wie mendida minis sia ne stemmen golt minis gehugenisse over wrisil, ind thin suottera. Iro Irlihtende hande begerlika also in mendida brudegomo herta in gewisso hoon over nachti ginathe um an, wrisil In. Betekameren hande gihorda ind ut fan ginathe herta the ginathe sint. Fan mi tegenwoordicheyt an sinro scal sinro wie, urkuntschap hande misdadi betekameren thero gereini untes in thinro.
This 3-column layout is based on Mattew James Taylor's 3 Column Holy Grail. It is a masterpiece of coding, relying solely on CSS, without recource to Javascript, graphics, or any other unscrupulous trickery to achieve three-column perfection. I strongly advise you to read Matthew's page to understand the seemingly strange order of the columns and to fully appreciate the qualities of the coding.
For my own purposes, I have modified the original CSS definitions to achieve equal-width columns and have placed some simple text in the HTML, but this could equally well contain links to images, or any other external resources.
The CSS used for this layout is as follows:
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%; /* width of page */
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0; /* no left and right padding on columns, we just make them narrower instead
only padding top and bottom is included here, make it whatever value you need */
overflow:hidden;
}
/* 3 Column settings */
.threecol {
background:#eee; /* right column background colour */
font-size: small;
}
.threecol .colmid {
right:33%; /* width of the right column */
background:#fff; /* center column background colour */
}
.threecol .colleft {
right:33%; /* width of the middle column */
background:#f4f4f4; /* left column background colour */
}
.threecol .col1 {
width:29%; /* width of center column content (column width minus padding on either side) */
left:102%; /* 100% plus left padding of center column */
}
.threecol .col2 {
width:29%; /* Width of left column content (column width minus padding on either side) */
left:39%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
width:29%; /* Width of right column content (column width minus padding on either side) */
left:77%; /* Please make note of the brackets here:
(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
And the Raw HTML is as follows:
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<!-- Column 1 start -->
<p>Un, an volwonende, Godes thenin godes, in wisduon luzzundon spraken. Thin fan sie geblithande sinro rehnussi also, misdadin drusten luyt heilig, wisduon sig noh endron bemillam noh werildi selitha drusten. Gebot fortha loupom ovir noh, honog luzzundon erthon fuor Godes fan an satta stemmen ne, werildis werk, wezen suottera, ne bemillam over gereini naht hoi fan. Beholenen min ne werildis ne drusten ne wesen werthon fan diroma ind ropizot? Guodlikheyt drusten festi, than an iro ropizot in wrisil that sin in suottera woorth dages diroma hande, gebot sinro minin. Erthon thenin sin in of brudegomo tellunt cund drusten withirloop diroma getruuin volwonende dach.</p>
<!-- Column 1 end -->
</div>
<div class="col2">
<!-- Column 2 start -->
<p>Misdadi drusten, fan sina gebot dach wezen hitte withirloop dages satta in wie sint of sina weh. Utgant Godes misdadi. Selim that an utgant stemmen, noh satta in an rechtlika mundis fan mikil.</p><p>Gehugenisse that gereini, in tellunt gelicum thinro also golt ne, stemmen ropizot in hoon werk ropizot sina rehnussi worthin festi. Sig erthon hertin an sinro fan, In fan bekerund wie rehnussi, heilig min Godes than sin. Schalc ewa, fan un solon thin um bemillam, Irlihtende withirlon sinro urkuntschap hoon beholenen gereini iro worthin noh.</p><p>Selvon spraken untes hertin. Meistero minin sinro cund fortha an, In Godes stemmen, ne ind fan im in.</p>
<!-- Column 2 end -->
</div>
<div class="col3">
<!-- Column 3 start -->
<p>Wezen in thenin spraken, wie mendida minis sia ne stemmen golt minis gehugenisse over wrisil, ind thin suottera. Iro Irlihtende hande begerlika also in mendida brudegomo herta in gewisso hoon over nachti ginathe um an, wrisil In. Betekameren hande gihorda ind ut fan ginathe herta the ginathe sint. Fan mi tegenwoordicheyt an sinro scal sinro wie, urkuntschap hande misdadi betekameren thero gereini untes in thinro.</p>
<!-- Column 3 end -->
</div>
</div>
</div>
</div>