CSS width problem in IE7

Hello all. I have just noticed a problem I am having in IE7. Put simply I have one container div set to, lets say 100%; two left floating divs are inside, side by side set to 50% each.

All is fine when the page opens up, but when I reduce the size of the window, sometimes the divs are side by side, sometimes the right hand div is underneath the left. After some fiddling around, I have found that they are side by side when the container div is an EVEN number of pixels, and top and bottom when it is an ODD number of pixels.

So if I set the container to 801px, they are top and bottom; at 802px they are side by side.

Has anybody else come across this. A simple solution is to set the right div to 49% and all is fine, just a little annoying.

Yup, it looks like it takes 50% of 801px and rounds it up to 401px(as measured in Photoshop). Apparently it doesn't like half pixels.

I've never come across it because I never use percentage based layouts.

Same here ...

Same here.. as nice as percentage-based pages could be, they always end up causing more trouble than they're worth when you start cross-browser and resolution testing.

HOW FLIPPING TRUE

I almost always use pixel widths but this time I am building an application to be used solely in-house, completey on IE6/IE7 with wildly differering screen resolutions. I thought it would be nice but I suppose I will go with fixed widths.

It's the first time I have come across it and wanted to check it did exist and I wasn't going a little screen crazy.

You might try something like this...