It's not so much that how you laid out your DIV is archaic, as it is that you've failed to use even the most basic of HTML elements properly, and that in 2011 none of those DIV should even be there! We have other tags for that stuff now.
You didn't even use numbered headings properly, it appearing that you chose them based on their default font-size and not their MEANING. An H1 is THE headING that everything on every page of a site should be a subsection of. Ever notice in a newspaper or book how the name of the document is on every fold-pair? That's the H1. H2 means the start of a major subsection of the page. H3 marks the start of a subsection of the H2 preceding it.
So how the devil do you start a document with a h3? That's gibberish from a semantic markup standpoint.
You're also slopping classes all over the place for nothing. Thanks to improved selectors and the new structural tag, none of those classes or DIV should be there.
Basically, we have tags for that. I included the proper use of H1 and H2, as well as a HR to say what's in the footer is not a subsection of "Sidebar". HR is for a change in thought/section, not "drawing a line across the screen". That's just it's default appearance. You don't like the line on your screen layout, leave it out.
Thus the grid for this would/could be set on BODY.
You've got a lot of other issues, like using PX with EM font-sizes, internal instead of page scrolling, I mean that original page has PROBLEMS.
I mean, if I were making a page like that, well... here's a quick rewrite using flex insteaad of grid.
https://cutcodedown.com/for_others/Dupasquier/template.html
As with all my examples the directory:
https://cutcodedown.com/for_others/Dupasquier/
Is wide open for easy access to the gooey bits and pieces. I’ve also tossed a .txt of the markup in there should one be gun-shy of “view-source”.
If we review that markup:
https://cutcodedown.com/for_others/Dupasquier/template.html.txt
I’ve added a character set and viewport meta, the latter being importnat for making it mobile friendly. The stylesheet link sets media=”screen” so we’re not sending the screen layout to non-scree UA’s.
A header around the H1 on the assumption you’d put a NAV in there.
The MAIN section starts with an H2 as it’s a major subsection of the page. The standout paragraph gets a class, and since the text inside it isn’t a book or document title, EM is more correct than the I tag. Remember, the italic tag is for when text would be italic when not receiving EMphasis or being CITEd. This is clearly text you wanted to emphasize.
The footer starts with an HR which indicates a structural change, basically saying that the content of “footer” isn’t content for the H2 before it. Since this is just loose text I wouldn’t even waste a paragraph or heading on it.
Basically if you don’t start from proper semantic markup, you’re going to struggle applying styling. More so if you don’t leverage that semantics and piss classes and “DIV for nothing” all over the place.