I’ve been dealing with a CSS problem for months. One that almost converted me back to using Table layouts instead of CSS (heaven forbid). Luckily, after many unsuccessful google searches and after much trial and error, I finally come up with a solution.
The problems occurs when you try to fit an extremely long table inside of a CSS layout. For example, you are designing a web based application that has a navigation bar on the left (column 1) and the main content on the right (column 2). In trying to be a good, upstanding, standards conforming citizen, you design the two column layout using css (see example).
Everything seems to be working properly, until that fateful moment in which you add a long table. The table is being used properly because it contains the budget report for this month, i.e. not for layout purposes. This long table creates a lot of problems with the typical two column CSS layout. The craziest part about this whole mess is that depending on which browser you are using completely different problems occur (see example in both IE and Firefox). As you can see from the example, our friend Internet Explorer causes the table to start below the last navigation link. Not only that, but anything above the table seems to disapear. What the devil is IE thinking you might ask? Good question. By viewing the same example in firefox, you will notice that the IE bug does not appear but the table does float right off the mainBody div, past the right border, and does not cause the mainBody to stretch with it’s contents. What the devil is FF thinking? Also a good question—fortunately I have a partial answer to this one.
Firefox, and many other standards friendly browsers will cause the table to bleed on outside the mainBody. As far as my Google research can tell me, this is a correct and standards compliant way to display our example. That’s as much as I know. So to combat the problem, if you are experiencing it, you can add a little <div> around your table and add the following style to it (see example):
overflow:auto;
Now for the IE problem. The simple solution to this problem, but the one that I cannot find documented anywhere on the web, is to place the following style on your navigation (see example):
position:absolute;
This will cause the navigation to "float" on a higher plane than the rest of the content and therefore the long table is unaffected by it. Because it appears within the container, it won’t lose it’s position unless you add other positioning styles such as top or left so you shouldn’t use them in this case.