Positioning problems with State School Website!

[ejoffe]

I'm hoping for some help with a positioning problem I currently have with a website for the Arizona State School for the Deaf and the Blind.

I have a three column layout, the third column (furthest to the right of the screen) keeps collapsing to the bottom of the main (center) content whenever I decrease it to resolution 800x600. This is a site that must display good (accessible) in 800x600 for our visually impaired community.

I hacked up a non fluid template in hopes on making it fluid. However in the process I've messed up the whole flow!

I've been racking my brain with this for weeks. What am I missing!? How do I get that right column to not clear or to get the center content to decrease further? I need no horizontal sliding at a 800x600 resolution.

View here: http://www.overeasydesigns.com/beta/layout4.html

Wasn't able to attach code because of character amount restrictions! Sorry, please help....

PS - you'll get nice warm fuzzies if you help because you'll be helping kids!

[maxkriz]

I took a look at your page and layout, and it seems you have declared the width for things in percent values, but the subcontent boxes on the right are defined in pixels (I think you have 183px, if i remember correctly). This is fine for larger screen resolutions, but as the resolutions get smaller, the boxes on the right stay the same size in pixels (and thus take up a larger percentage of the screen). This causes overflow on 600x800, and is the reason why the boxes are showing up below the content. To fix this, you can either declare the subcontent box widths in percent values, or declare the rest of the divs in pixel values, or just make the boxes a bit narrower (like 160px- it looks like you're only over by a little bit).
I like to use pixels for my work, and I find that 770px total width is about right for an 800x600 screen with a scrollbar on the right. In your case, however, the percent values would probably be a better choice. I hope this helps.
-Max