Your approach has minor flaw - you shouldn't put "Content Box" div in your HTML unless it has some meaning. There already is body element for that purpose (in good browsers html and body elements can be styled). However, with high probability this flaw is insuperable, as currently commonly used browsers suck in supporting some important features of CSS 2.1.
Except for that your design seems to be correct.
OK, some simple points to clarify for you...
The "whole site box" is probably going to be the body element of the page. You could add a whole wrapper div for it, but it would not gain much in the first instance.
The use of a "content box" is ok, but I would be wary of using it unless you want to specifically limit your site to a fixed width layout.
The other boxes can be added directly to your body element, and positioned/styled individually. You'll probably end up with something like this...
<html> <*-- include your doctype and stuff, obviously -->
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="sytle.css" />
</head>
<body>
<div id="header">Your site header content here</div>
<div id="mainNav">navigationhere</div>
<div id="content">main content here</div>
<div id="footer">footer stuff here</div>
</body>
</html>
There are plenty of resources for positioning, etc, around. I found the best way to learn (although I'm very rusty on it these days) was to look at examples, unpick what they were doing and have a go myself. Try looking at http://meyerweb.com/eric/css/ and http://www.csszengarden.com/ for a starting point of what's possible.
HTH, but I'm sure someone with up-to-date html skills will be along in a minute.
I think the "big" (green) content div is actually a wrapper div that helps you set the width of your website (most wesites nowadays prefer not to use all of the available screen width - stackoverflow is an exception).
I totally agree with samuil on his point that you shouldn't have functional divs. That's what got us into the whole mess in the first place (if you don't know what the mess is, do a search regarding tabled-layout).
BUT
something to be aware of: If you set an outer-element (like body or even html, but careful) to relative, it will require an explicit height or it may shrink up or no longer contain (visually) the child elements. But if you set the body to a height of 100%, it will be 100% of the window not the document, meaning that when the user scrolls down, the body doesn't scroll with them. It's very weird and annoying.
I honestly recommend just not worrying about layout. Make the copy look good and clean and people will hang around (see: this site). Obviously there are some aspects that make a site more usable or attractive, but I always use the rule of thumb: if I turn everything off, will it still work and will it make sense? I'd rather a page look boring but readable with no CSS and then start messing with the layout and colors then have a site that turns into a pile of divs and p's it one browser (cough, IE) doesn't play along.