The problem you have there is every webdesigner's nightmare: cross browser in-compatibility!
The border attribute in CSS is handled differently by Firefox and IE. In Firefox it seems to be "inside" the div, whereas in IE it is "outside" the div. That means, when you have a div width: 500px; and border: 1px solid #336699;, in Firefox the div remains 500px, but in IE it'll be 502px (1px left border and 1px right border added). That is why the right content is in the new line and not where it is supposed to be.
What you can do is two things:
First: make the right content spaller in general.
OR Second way: Use a FF/IE workaround!
in your Stylesheet for the right content use the following:
width: 500px !important;
IE is not able to interpret the !important attribute, although it is valid CSS. That means, in non-IE browsers it will use the !important marked attribute, whereas IE can not interpret !important and will use the width: 498px; setting.
If you want to know more about !important you should visit the W3C CSS Reference
Hope this resolves your problem.