Problem with layout when window resized

[HDRules]

Hello, I got a problem that I cannot quite see the solution. Can you help?
Page can be seen at

http://www.mcrallyfinder.com/

and the stylesheet is

http://www.mcrallyfinder.com/mainstyles.css.

The problem is, if the user resizes the window, the left column menus and links shift toward the middle of the page, obliterating the main column text. This is exagerated if you set the text size larger. Also, it appears when you get to a point the header shrinks more than the rest of the body (left, middle and right columns). This was pointed out to me by someone using IE 6.0, but not sure if the same thing happens in firefox, since I am at work and firefox is not available on our machines here.

Any ideas how to keep the column from shifting?

Thanks

Motorcycle Rallies and Events

 

[HDRules]

I think I found the problem. #pagewidth is a container which basically controls the width of all the content of the page. I had originally had it defined so:

#pagewidth {
 width:80%;
 text-align:left;
 min-width: 500px;
 margin-left:auto;

 margin-right:auto;
}

I changed the width: 80% to width: 800px, and it appeared to clear it up on my test page. Is there some rule against mixing % measurements with fixed measurements? I had the left and right columns floated left and right respectively, and with fixed widths. Is this what caused my initial problem?

I will be implementing this potential fix to the real site tonite when I get home, but sure would like to understand this fully if one of you can explain it. Thanks

Motorcycle Rallies and Events

 

[Vragabond]

I suppose the problem you were running into had to do with non-existing measure of pixel fractions. Say that 80% is at one point 800px, then you squeeze the screen a little bit and that 800px becomes 799.8px for example. Failing to render that, browser reverts to 799px. That is the only reason I could find for the strange behaviour on your page.