Equal Height CSS Columns With Filler Text
If you search for "column alignment" or "css columns", you'll probably eventually end up at In search of the One True Layout at positioniseverything.net. That's great stuff, but it is not what I wanted.
I want to fill the left hand column with text so that it matches the height (the page length) of the main text in the right hand column. I can't always do that - for one thing, I may not have enough filler text, because the text I want is links to related content (that is, other articles related to the content in the main text). Also, there's a certain amount of content I want on the left hand side no matter how short the right hand side is. So I can't always be perfect, but I can get everything aligned most of the time.
The problem, of course, is knowing when to stop writing text in the left column. At some point, the length of that column will exceed the text already displayed in the right column, and that produces an unattractive page. I could just write a few things in the left side, but that can leave lots of wasted space if the right hand side is long, and while that's not extremely ugly, it is unused space that I'd like to fill with content.
The problem with client side Javascript is that it can't read files on the webserver. You wouldn't want it to be able to, because it is running from the browser of the person reading your page and could be modified by them. Perl running on your server through a SSI (Server Side Include) of course can read files, so we'll use that to create Javascript code. If that confuses you, you probably just need to play with this to see it in action.
This is the Perl code that produces the Javascript that aligns the left column:
print <<EOF;
<script type="text/javascript">
function getht(h) {
var x=0;
while(h) {
x += h.offsetTop;
h= h.offsetParent;
}
return x;
}
var nb =document.getElementById("nearbottom");
var nbht=getht(nb);
var cht=0;
var leftside =document.getElementById("leftside");
var leftheight=getht(leftside);
var filler=new Array();
EOF
for ($x=0;$x < 50; $x++) {
print qq(filler[$x]=');
randompage();
print qq(';\n);
}
print <<EOF;
for (var x=0; x < 50; x++)
{
if (nbht > leftheight ) {
id='p' + x;
var pfiller=document.createElement("p");
pfiller.id=id;
// use next line if you want to see the variables for debugging
// pfiller.innerHTML=filler[x] + " " + leftheight + " " + nbht;
pfiller.innerHTML=filler[x] + " ";
leftside.appendChild(pfiller);
leftheight=getht(document.getElementById(id));
}
}
document.write('<br /></div>');
</script>
EOF
The "randompage()" is a subroutine that returns randomly sorted related pages - I'm not showing that here, but it should be easy to imagine what it does. If it has nothing more to return, it returns "<br />". After this runs, the page is going to contain something like this:
<script type="text/javascript">
function getht(h) {
var x=0;
while(h) {
x += h.offsetTop;
h= h.offsetParent;
}
return x;
}
var nb =document.getElementById("nearbottom");
var nbht=getht(nb);
var cht=0;
var leftside =document.getElementById("leftside");
var leftheight=getht(leftside);
var filler=new Array();
filler[0]='<a href="/Words2005/2005_07_30.html">Archiving All Email </a>';
filler[1]='<a href="/Security/fake_blacklists.html">Fake blacklists? </a>';
..
filler[48]='<a href="/Security/web-ip-filter.html">Web site IP filtering </a>';
filler[49]='<a href="/MDesrosiers/pci_dss.html">PCI DSS and ISO 17799 </a>';
for (var x=0; x < 50; x++)
{
if (nbht > leftheight ) {
id='p' + x;
var pfiller=document.createElement("p");
pfiller.id=id;
// pfiller.innerHTML=filler[x] + " " + leftheight + " " + nbht;
pfiller.innerHTML=filler[x] + " ";
leftside.appendChild(pfiller);
leftheight=getht(document.getElementById(id));
}
}
document.write('<br /></div>');
</script>
What that does is fill an array of 50 items that can potentially be used to fill space. In the right side main text, the last paragraph is marked with an id tag: <p id="nearbottom>. The Javascript finds the position of the "nearbottom" paragraph to start with, and then starts creating new paragraphs filled with the text randompage() supplied. The code checks the position of each new paragraph, and stops writing them once that position reaches that of "nearbottom".
Of course the filler material could be anything: pictures, random jokes, whatever: even more Javascript scripts (though that gets really hard because of quoting).
Keep in mind that I am no Javascript expert. I tested this on Firefox, Safari, Opera and Internet Explorer 7, but there may very well be places it will not work, and failure to work will either produce nothing at all or 50 lines of text no matter where "nearbottom" is. You do need to quote " ' "'s in your filler text returned by random() or whatever function you call.
If you are going to play with this, I strongly suggest using Firefox because of its built in Javascript console. That will let you see Javascript coding errors which are usually caused by quoting errors when you are producing the script from another program as we are here. Without that console, it can be really hard and very frustrating to find the simplest errors.
The only problem I have with this is that I can't use the W3C validator with this code. I don't understand why yet, but W3C seems to think that the "filler[0]=" lines are HTML that should be checked.. I haven't figured out why, but it's surely my mistake somewhere..
*Originally published at APLawrence.com
View All Articles by A.P. Lawrence
Receive
Our Daily Email of Breaking eBusiness News
About the Author:
A.P. Lawrence provides SCO Unix and Linux consulting services http://www.pcunix.com
 WebProNews RSS Feed
More Expert Articles Articles
Contact WebProNews |
|
A.P. Lawrence
