IE scrollbars overlap content.

Hi guys,

I have a problem that seems to be around for quite some time, but I haven't seen a proper answer anywhere yet.

See the following :

On Firefox, A and B are displayed with the same width, which is 50% of the the div "container" width minus the vertical scrollbar width.

On IE, the width of A seems to be bigger because part of B is overlapped by the scrollbar. In effect, the width of A and B is 50% of the div container and doesn't take the scrollbar width in account.

Is there any way to make IE behave like firefox ?

Thanks,

Yohann

re: IE scrollbars overlap content.

The markup and css you have is not valid. While it will work when valid in FF/3, it will not work in other compliant browsers, or IE/6 and IE/7. No matter what you do.

Providing I understand what you are attempting, a different construct will work cross-browser. This example has been cursory checked in the latest versions of Opera, FF, Camino, Safari, and WebKit on Mac OS X 10.4.11. And in XP IE/7.0 and IE/6.0 on a PC. I do not have FF/2x on either machine to check it in at present. The "trick,," so to speak, in addition to a different construct, is to remember the width of the gray box includes the width of the scroll bar-- it's a 40% red / 60% gray relationship (I think).

HTH

re: IE scrollbars overlap content.

thanks David. But as you pointed the gray box is in fact wider than the red one, which doesn't solve my application's problem.

Also, in my application, #a and #b may or may not be with a bigger height than their container. If they are smaller, both divs should still be dividing the container 50/50 and no scroll bar should be displayed (as FF does it).

Thanks for trying anyway, I really appreciated the effort.