Non-standard CSS 3-column method: doomed?

Curious behavior in float-left percentage-width columns

[albo]

My layout is simple, and incidentally this happens even on pages that have no intruding images! It is:
#left { float: left; width: 21%; }
#main { float: left; width: 52%; }
#right { float: left; width: 25%; }

There is no header or footer, just these three columns. The left is a ul, for navigation. The other two are the usual mixed text. All works well. Now, for the *curiosity* (not problem):

On some browsers (at home, of course) - Firefox, IE, Opera, Netscape, Amaya, various versions of each, the three columns "squeeze up" gracefully when the browser window is dragged to narrow the window...as I would expect some users occasionally do.

On browsers on other computers I have visited (also XP, also IE): When the window is narrowed, instead of column narrowing, I get column shift - i.e., right column drifts below main column.

What could it be, about the CSS I've shown, that would enable such behaviour?

[JAB Creations]

With dynamic layouts not all browsers update their rendering onresize and thus your dynamic layout becomes static once the page has loaded.

I would detect the browser(s) that create this error and basically reload the page if you can't find a way to simply rerender the element itself.

- John

[Xapti]

IE should update on windowsize though.
Make sure you have your doctype set properly.
Make sure you have a width given for these column's container (100% for instance), as well as the body of your document.
What are your margins? I reccomend you set margins to zero, and you can add padding if you want spaces. That way you can have all 3 DIVs add up to 100% width (instead of this 98%).

If you still get problems, you can always try absolute positioning instead of floats.