HTMLの文法では、関連性のあるものを１つのグループにまとめなければなりません。
逆に、関連性のない物は別のグループに分けなければなりません。
といってもHTMLやコンピューターに限った事ではなく、たとえば衣服とおもちゃを一緒の箱にしまうことがないのと同じです。
記事とコメントをHTML構造上では一緒にして、デザインだけ離す（CSSを駆使して離れている場所に表示させる）ようにします。
記事と記事に対するコメントは関連性がありますので、記事と同じグループに入ります。
<div id="main" class="article">
<div class="pseudo-section"><!-- 記事はarticleに対する主体のため、このdiv(section)はない方が良い。デザイン上必要ならsectionではなくdivで。 -->
記事
</div>
<div class="section">
コメント
</div>
</div>HTML4では
<div>でグループ化していましたが、HTML5では<article><section><aside><footer>などでグループ化します。
タグ名が変わっただけで基本的な文法そのものは変わりません。
W3Cに書かれているように、
記事とコメントを１つのグループに入れ、そのグループの外側にサイドバーを記述します。
<div id="main" class="article">
記事
<div class="aside">
記事に関係する余談、注釈など
</div>
<div id="related-pages" class="nav">
関連記事へのリンクなど
</div>
<div class="section">
コメント
</div>
</div>
<div id="nav" class="nav">
記事に関係のない、サイト全体のナビゲーションなど
</div>
<div id="meta" class="aside">
ログインフォームなど
</div>
<div id="ads" class="aside">
広告
</div>
このように文書構造を決定、作成した後、デザインに取りかかります。
レイアウトはHTMLを変更せずに、CSSだけで行うことが推奨されます。
いくつかのグループを、デザイン枠を付けるために
<div>で囲ったりすると、最初の例と同じ、それらのグループが１つのグループと見なされます。
デザイン枠で囲むということを、HTML構造としてグループ化されている事を明示しているに過ぎません。
<div id="nav" class="nav">
ナビゲーション
</div>
<div id="miscellanous" class="aside">
<div class="section">ログインフォーム</div>
<div class="section">広告</div>
</div>このパターンがあれば、基本的なレイアウトはたいてい作れると思います。
http://blog.html.it/layoutgala/index.html
classやidの付け方ですが、左に表示しているから#leftとしたり、サイドバーに対して#sidebarというのは不適切です。
いわゆる1カラムデザインの場合に「サイド」ではなくなるからです。
CSSだけでレイアウトを変更できるということは、#sidebarというidを付けている物に対して、上下に配置する事も可能になり、配置場所とidが指し示す内容の不一致が発生します。
表示場所ではなく、そのブロックの内容、意味をidやclassにするのが推奨されます。