Problems with controlling position of div's

I am working with div's and am having problems with positioning them. I have attached a sample html and css file if anyone would have time to look and straighten me out. As you will notice, 2 of the div's are not even visible as they are being covered by another div.

I want the page centered and able to work in different resolutions. I can't seem to figure out how to do this without using percentages. I want the divs to touch rather than be spread out on the page. An example of this is here.

As you see, the main part of the site stays centered. I looked at the sample CSS for the site however, I do not see the controls that are needed to accomplish this.

If anyone can help, I'd appreciate it.

Regards.

Ah, I figured it out. Well, at least I made it work. If anyone is wondering how I have added the new css file to this response.

However, even though it "works", I would still appreciate comments if there is a better way. I added margin-left: 150px to the main content div which moved it off the others. I also changed the main containers css.