in new markup not displayed.

So I've been maintaining my company's ModX site for a few months now. I inherited it from the guy who built the site a while ago and it was constructed using tables. In an effort to streamline things and make it easier for others to update our homepage I created a version of the homepage that uses divs and not tables and has a cleaner .css implementation.

This 'new' page is really just a redesign of the content that sits within the old template and a new style sheet. I have not touched the template except to link to the new style sheet. Unfortunately when I add it in, the div's are recognized because the font styling and so on is displayed properly but only about one of the div's is properly aligned and laid out. Its all the more confusing because some of the new styling works and some does not.

Here is the current webpage,
http://www.air-inc.com

And here is the as yet unsuccessful table less attempt.
http://www.air-inc.com/index.php?id=248

I can see already that the header and footer are repeating themselves since they are called for both in the template and in this new page. However, I don't see how that would have anything to do with the problem I am currently having.

Anyone have any ideas?

To me the two look basically identical. I don't see the repeat you speak of.

What browser on what OS are you? I'm on OSX and tried 3 browsers. Are you linking both style sheets to same page by chance?

Are you pasting the reworked page into the rich text editor by any chance? TinyMCE (which is pretty much the default) has a tendency to filter out markup it does not approve, which could explain the issues you describe.

The better way would probably be to create a new template and switch your testing resource to that.