Website is not fluid on different resolutions, any solution?

[mpfrink]

I began designing my webpage on my home computer, 1680 x 1050, and a wide screen monitor.

While it looked great on my screen, when I had a friend look at it, he told me the positioning on some parts were off and that he had to scroll a lot.

my URL is:

http://www.frinkdesigns.com

CSS:

http://www.frinkdesigns.com/css/index.css

Both the index.css and index.html pages validate, I have quite a few errors for the rest of the pages but I figured that any fix you guys can think of, I'll just duplicate on each page.

I'm totally stumped on what to do for this. I kind have a feeling it all comes down to the size of my background img:

http://www.frinkdesigns.com/images/frinkDesignsbkg.jpg

I read something about using ems, but I don't really know what I would change to ems, and how that would help. So if that is the solution, could someone possibly explain it a little better.

Thanks guys

[Death Slaught]

The problem is you've made everything to large and therefor, the page on smaller resolutions overflow, and you get scrollbars. The only solution I can think of is to recode the page, and remake the images, so they fit into an average screen resolution (around 1024 by 768 pixels).

Thanks, Death

[mpfrink]

How do I set the margins so they will be correct on all resolutions? For example, I changed my background's res to 1024 x 768 so when I set my computer to that resolution, the container I make is in the right position with a margin-left of 30px, but as soon as I go back to my default resolution of 1680 x 1050 this margin is completely wrong.

[drhowarddrfine]

px is a fixed dimension. If you want it to be fluid, you need a relative one; that is, relative to the size of the screen. This is where percent comes in. Set the margin to, say, 5% as a test.

[mpfrink]

still doesn't work, I have no idea where to go from here.