Before continuing, and before you get offended, lets specify exactly who “you” is before I explain why I’m smarter.
I’m redesigning the layout for this page using CSS and DIVs to accomplish what tables do. Why? Because if you do it with DIVs and CSS instead of tables, later on you can move objects around your page using the CSS instead of redoing the entire godawful thing.
So, I want to have my page, which has 2 columns (the articles and the menu) to appear as though its on a white “stripe” down the page. I ran into a snag while doing it, and I searched all over the internet trying to find a solution to it only to find a large amount of people offering incorrect solutions and/or people saying it couldn’t be done. If you, the reader, fall into the group of someone who either provided an incorrect solution or told someone what I did could not be done, it is YOU who I am smarter than.
Now.. what did I do?
See, the snag I ran into was this… it looks simple. You just make a DIV with a white background position it absolutely, then put the content in it positioned relatively. Easy, right? No.
This is the snag. When you position the articles relative to the white box, when you try to position the menu, it positions relative to the articles, not the box. (Relative position means its relative to the last non-auto positioned object.) Since the articles are of variable length, I can’t use negative positioning to do it relative to the articles.
So, you say, the articles are always longer than the menu, just position the menu absolute and leave a margin on the side so it “appears” to be in the white. No.
Do me a favor, on the menu, click on Fiction, look at the page, then come back here.
Done?
Okay, see how it looked good? It didn’t when I did what you were just saying (and what almost every post out on the net suggested). See, Fiction one day may be longer than the menu, but for now the list of fiction on the site is not. So, when I did the suggested method, it resulted in the menu exceeding the length of white.
Surely, you say, there must be other solutions? Why not put the menu in a white DIV too and position them both? Well, you see, if you do the articles and the menu totally separate, you lose the ability to do a white “stripe”, as one will invariably be longer than the other.
Well, you now say (and many of you did, out on those help forums), why not use one of the many tricks to just place a white block that extends the full length of the page? That doesn’t work either. See, some browsers don’t (and according to the standard, shouldn’t) support a property of height: 100%. At least not how you might imagine. Sure, it goes to the bottom of the browser… but when you scroll down, the white has stopped.
Okay, you say, you give up, I’ve tried all your solutions and they all fail. But the page looks right, so, how did I do it?
The articles are in a div that has a white background, so that there will be white extended as far as the content goes. And the menu is positioned absolutely so that it appears in the white stripe. But wait, did I say that didn’t work? Yes, I did. By itself, this method does NOT work. However, before all the other DIVs on the page, there is one called whiteblock. This DIV has the same absolute position of the article content div, but it has a specified length of 1400px, which just so happens to be just larger than my menu. So when the content of articles isn’t longer than the menu, the whiteblock shows down to the length of the menu (its drawn first, so is logically on the bottom, only showing when nothing else is on top of it).
In theory, my menu won’t change too often, and when it does, I need only adjust the height of whiteblock to maintain the look of the site.
Voila. To all the people who said it couldn’t be done, or provided incorrect or incomplete answers… I’m smarter than you!