It does look like he’s over done in on the divs. If there’s not going to be content in any of the three ‘positioning’ divs – then there’s no need to have them. The lowest ‘content’ div’s position can be arrived at with a bit of padding.
The best way to layout your html is to do so economically. Try not to use anything that isn’t there purely for content. Once you have your html structured semantically and economically – then you can begin the fun task of layout with CSS. Divs are overused generally and it is bad practice to apply any element that is unnecessary. Occasionally this is forgivable when a ‘spare’ div (of other element) is used to clear a float or something similar). Any block-level element may be controlled in the same way as a div – therefore, for example, an unordered list doesn’t need to be wrapped in a div (as is a common practice), but may be styled just as effectively with its ul selector. This is also true of h1 (and all h tags), p tags, blockquote etc. Try to refrain from wrapping everything in Div’s unless you’re grouping content – i.e for a multi-column layout where there are a number of element-types in each column.
The link you provided is probably fine for developing an understanding of nested divs, but I wouldn’t use it as a reference to a well structured web page.
Yeah I can see how that would be confusing. That’s what we’ve began calling "divitus" where people just put way too many useless divs into the markup. In that image, I see no real use for the colmask, colwrap, or col1wrap. Sometimes there is a reason to wrap a div inside another div, but they present no compelling reason for it there.
It’s extra confusing how they call the div on the left "right" and the div on the right "left". That’s the sting of using descriptive text like that for class names, it comes to bite you. Much better to call it "main-content" and "sidebar", so whether that sidebar is on the left or right, it’s name still makes sense.