Struggling to design a web page and facing a critical question. The goal is to display an article in the main column on the left, with several comments below it. Meanwhile, ads should be shown in the right column. The issue at hand is that no matter what layout I try (including the latest one), the right column always ends up falling below the left (article and comments). How can this be resolved? The main column (article and comments) needs to have the flexibility to expand endlessly or shrink significantly (if there are no comments), while the right column must consistently stay on the right side.
<body>
<div class="container">
<div class="header">Header menus etc etc</div>
<div id="main-block">
<div id="article-and-comments">
<div class="article-detail">The Article </div>
<div class="comment">1° Comment</div>
<div class="comment">2° Comment</div>
<div class="comment">3° Comment</div>
</div>
<div class="advertising">
Right Column with Ads
</div>
<div class="push"></div> <!-- This is to push the footer to the bottom
</div> <!-- main-block -->
<div class="footer">
Footer
</div>