Some minor nitpicks...
You've got multiple H1, which is -- without SECTION -- semantic gibberish, and even with SECTION not one legitimate UA recognizes it.
An H1 is THE (singular) headING (singular) that everything on every page on a site is a subsection of. That's what it's for. Just as a H2 indicates the start of a major subsection of the page, with the first H2 marking the main content unless MAIN is present after it. H3 marks the subsection of the H2 preceding it, and so forth down the line. That's why you don't use multiple H1, don't suddenly jump up to H5 when there's no H4/H3 marking what it's subsections of, etc, etc.
Your "mainColumn" we have a tag for now, called MAIN, use it.
Saying "sidebar" is a bad idea since once you go responsive it might no longer be a sidebar. Same as how people abuse "aside" (meaning related supplementary content) for a sidebar, it's the wrong mindset. I'd call that section something like "extras" since it likely won't be a sidebar on all layouts. Yes, plural. layoutS.
Each of your "panel" div should probably just be SECTION tags, and you should probably have a SECTION for your main area as well.
Float is an outdated way of building things, but even when using float don't try to float or dynamic width everything. % layouts breakdown badly at really small or really large screen sizes. You'd be better off just floating one column, then using overflow:hidden to let the remaining column suck up the available width.
Though these days, display:flex is your friend.
Here's a more modern take on it, that's also responsive stripping off columns when they don't fit.