I've encountered a challenging issue with alignment on a website I'm currently working on in IE6. Interestingly, the site looks perfect on all other browsers such as Firefox, Opera, Chrome, and Safari, as well as newer versions of Internet Explorer like IE7, IE8, and IE9. After some troubleshooting, I discovered that an additional 25 pixels are mysteriously being added to either the main body section or the right column of the page (represented by divs #body_box or #right_box in the JS Fiddle link provided below). Instead of appearing inline as intended, the #right_box overlaps and shifts beneath the #body_box, floating to the right.
To test my theory, I widened the div #Complete_Layout to 1025px (from its original width of 1000px), and surprisingly, it resolved the issue in IE6. However, attempting widths of 1026px or 1024px didn't yield the same results. I meticulously checked the dimensions of the background images to ensure accuracy and even experimented with setting the widths of the two divs (body_box and right_box) in percentages (75% and 25%), but unfortunately, the problem persisted. At this point, I'm at a loss for new solutions.
If anyone is willing to lend their expertise, here is the link to the jsFiddle showcasing the problematic layout: http://jsfiddle.net/cRcXq/
Additionally, please note that I am working with PHP and that the body_box and right_box sections are included via external files (not sure if this detail impacts the issue). I've marked where the index.right.php file begins in the HTML comments within the JSFiddle. Your assistance is greatly appreciated!