You will notice that because the area on the right has a long text section, the white box at the bottom is longer on the right than it is on the left. To create the white box for this whole page, I used the following:
You'll notice it's 680px wide, and 100% tall. However, the 100% means 100% of the CURRENT visible screen area. So once the web site starts to scroll, it's past 100%.
What is the fix for this? How can I make the white box go all the way down to the bottom regardless of how much text content is on the right side? I cannot set a specific pixel number because I'm not sure how much text will be on each page.
I guess my original setup just wasn't right. Please help.
When you created the box, you told it the height. Take that out and see if it works. I don't think you can technically put in 100% for the height and not have problems. Why not simply make the entire background white on the page and put in sidebars, then you have the white bar all the way down the page and have your links in there as well.
BTW, it looks pretty odd in Fire Fox. The white box in the middle overlaps and it's not aligned. Just so you know.
My code is valid XHTML 1.0 and valid CSS. I did not "comment out" my CSS. The number signs are there because I am using the "ID" selector.
Update: I removed #HIA2-01 completely. Please view link again and you will see the problem. No white background on the left side. How can I create one that's going to be as big as it needs to meet the right side of the page?
Remember that in HTML comments start with <!--, not the crunch (number) sign.
But either way, Mozilla at least ignores your comments in the style section. My bad.
How about a table version instead? It was a slow day - take a look at http://www.xigole.com/wht/test.html. I can't get Mozilla to render it 100% correctly - it seems to want to add a 5 pixel border to the first table. I.E. does ok and I can't get to a Netscape install right now.
It's not perfect but maybe you can use it as a start. I don't know if you don't want nested tables though.
There's still some things i would change if it were me, i wouldn't have relied so much on absolute positioning, and some of your images would be better as backgrounds in the div (like the menu bg) but hopefully this at least fixes the problem you were having: