weird centering issue when using dynamic ajax content to fill a div

[gaj_ft]

1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

3) Describe problem: Hey guys, new here but have been learning heaps from this site in the past few days, heres my problem:

Im using the dynamic ajax content script to load another html page (same server) into a div of my main page. It works amazingly BUT once the ajax runs and the page is loaded into the div, my entire page gets shifted to the right and is no longer center. The margin on the left becomes almost twice the size as the blank margin on the right.
Here are some pictures to help explain:
Page loaded, before clicking a link that calls the script: http://postimage.org/image/bethn47wt/
Page after clicking a link that calls the script, external page loaded, page no longer centered: http://i40.tinypic.com/2z3zxwz.jpg

This occurs in all major browsers such as IE, chrome, FF and opera.

My page is being centered using 'margin-left/right:auto' on both my body and #wrapper in my css. Ive been fiddling with making sure everything is constrained properly in terms of widths and margins but still no luck. Does anybody know what might be causing this? Does it have to do with a 'positioning' trait? or perhaps the html file that im trying to load in?

Any help or guidance would be greatly appreciated,
Thanks!
Gaj

[traq]

Please post a link to the page on your site that contains the problematic script so we can check it out.

Nothing to offer without seeing your page / code.
Images are of very little use in troubleshooting script problems.

You seem to have started several threads with similar/related questions.
Please keep all related topics/questions in one thread. This will allow other users to give you better, more complete answers, and will also help users that have the same problem.

Remember, never post the same question/topic in multiple threads or forums.

[gaj_ft]

Sorry about the double post, i've already edited it out and hope a mod removes it soon.
Heres the link to my website: http://iestest.net23.net/productsandservices.html (temp hosting just to test ajax scripts)
Currently only the 'products and services' page has the two ajax links in it (links 3 and 4 in the left hand nav menu). The external css is here: http://iestest.net23.net/complexstyle.css

[traq]

you have a div#wrapper on your parent page, and another in the page that you're loading.

It's illegal to have two elements with the same id on the same page - but what's actually causing the problem is the css file that you're loading with the dynamic content (iformcss.css), which gives a new width value for your #wrapper (overriding the parent page's initial value).

You need make sure that there will be no conflicts between the parent page and the page you want to load into it. Aside from making sure there are no other duplicate id's, you might want to "scope" the css rules you want to apply to the loaded page (ensuring that they won't interfere with the parent page css). With HTML5, there is a simple, direct way to do this:
<style scoped>
/* ...styles go here... */
/* these styles are supposed to apply _only_
to their parent element and its children. */
</style>However, this doesn't currently work in any browser.

Use it, because it will work in the future, but for now you'll have to do some old-fashioned work-arounds:
<style scoped>
#container .myclass{ /* some rule */ }
#container #myid{ /* another rule */ }
/* ... */
</style>basically, prefix every rule with the id of the parent container (i.e., your #contentrightcol).

This way, your loaded css rules will never match any elements in the original page.

[gaj_ft]

I cannot thank you enough for pointing this rule out to me. Not only did you answer my question, you went beyond to teach me even better tricks.
Cheers,
Gaj

[traq]

no problem, glad I could help