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 "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:
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=" lines are HTML that should be checked.. I haven't figured out why, but it's surely my mistake somewhere..
Got something to add? Send me email.
(OLDER) <- More Stuff -> (NEWER) (NEWEST)
Printer Friendly Version
Increase ad revenue 50-250% with Ezoic