CSS box model pushing element lower on the page

Answer 1

Well, I know that min-width doesn't work on the BODY tag, at least in certain versions of IE (I thought it worked in Firefox, though). You might want to try putting your entire page in a DIV tag and setting min-width on that.

Answer 2

I got it to work in both Safari and Firefox (haven't tested the other browsers yet)

Change this:

#content{
      padding-right:300px;
      background:#F00;
}
#main{
      padding:5px 15px;
      width: 100%;
      margin-right: -30px;
}

Dunno why this works any better than what you have above, but it does :)

If you're looking for premade grid-based layouts, though, I'd suggest BlueprintCSS. I've used it for a bunch of projects, and it's really easy-to-use. It is a fixed layout (not fluid like yours), so that may be a deal-breaker.