Help! 3-column CSS layout - center column too wide when text is resized

[ComputerBob]

Nearly all of my site uses a 2-column CSS layout that works fine.

I'm trying to get my home page to be a 3-column CSS layout, using absolute left and right columns, with a fluid center column, as described in HTML Utopia.

My 3-column layout currently works in IE6, as long as the browser's Text Size is set to "medium" or "smaller" or "smallest".

If I set the browser's text size to "larger" or "largest," the medium column expands and runs underneath the right column.

I know that others must have run into this problem, but I can't find any other posts here about it, and I've tried to change several things in my CSS without any success.

My 3-column page:
http://www.computerbob.com/index2.php

The CSS:
http://www.computerbob.com/css/styles.css

[Paul O'B]

Hi,

Have you fixed it as it looks ok in my IE6. I set the text to largest and nothing seems to overlap.

Paul

[ComputerBob]

Thanks for looking, Paul. I've spent the entire day on this one problem, but the center column is still expanding about 30 pixels worth, underneath the right column for me if I set the IE6 font size setting to anything larger than "medium."

[ComputerBob]

In my browser, it appears that the center column text itself is pretty much staying at the correct width, but I'm getting about 30 pixels of extra white padding to the right of that text, with the right border of the center column ending up about halfway across the right column, but underneath the right column.

[Paul O'B]

Hi,

Here's what I get on largest text size in IE6 (pc).

http://www.pmob.co.uk/temp/images/combobimg.gif

Paul

[ComputerBob]

I FINALLY FIXED IT!!!

I could hardly believe that I had found out what was causing the problem, but as soon as I did, I knew that it was going to work!

You know those translation links at the top of the center column? I finally realized that, in my IE6 browser, the text of those translation links was THE ONLY TEXT that was extending underneath the right column when I made the font larger. Because it was extending to the right, it was causing all the text below it (which stayed within its specified width) to have a lot more right padding.

That was the clue that told me to look at the code for those translation links, and that's how I finally "broke the case."

When, I replaced the non-breaking spaces between those translation links with regular spaces, the problem went away, and the page looked just like the screenshot that you did! Looking back at it, it shouldn't have taken me the whole day to figure that out.

Thanks for your help, Paul! The screenshot that you made was very helpful!