It is a ronpat choice. I like to containerize things. It allowed me to change the horizontal padding/margins so the negative horizontal margin on <h2> was not needed. Simplified the min-width and max-width calcs a tad. It also encloses the <h3> line which needs to preceed .boxSubSection. It is not absolutely needed. There was nothing subtantially wrong with your method.
It wasn’t in the sample that you posted, so I can’t really guess why (uppercase notwithstanding <smile>).
It clears the floats within .boxSubSection. If you disable it, you will notice that the bottom margin of .boxSectionHome is reduced.
I think I’m getting closer. Say, on a side-question, how do I get the image below to move to the right of the Heading and Paragraph but still stay inside the container #subFeatured ??
<!-- ECONOMY (sub-section) -->
<div class="boxSubSection">
<h3>Economy</h3>
<!-- Featured Article -->
<div id="subFeatured">
<img class="noborder" src="/images/HatShop_100x70.png" width="100" alt="" title="Hat Shop" />
<h4>Which states support Main Street?</h4>
<p>Policy makers everywhere pledge to support small firms. But not every state government follows through.</p>
</div>
If I can get that fixed, maybe I can show you a screenshot?
<!-- MIDDLE COLUMN -->
<div id="pageMidCol_2">
<!-- ARTICLE LISTING -->
<div class="boxSectionHome">
<h2>Finance</h2>
<div class="boxMidSection">
<h3>Economy</h3>
<div class="boxSubSection">
<!-- Sub-Section Featured Article -->
<div class="subFeatured">
<img class="noborder" src="/images/HatShop_100x70.png" width="100" alt="" title="Hat Shop" />
<h4>Which states support Main Street?</h4>
<p>Policy makers everywhere pledge to support small firms. But not every state government follows through.</p>
</div>
<!-- Sub-Section Article Links -->
<div class="subArticles">
<div>
<h4>Which states support Main Street?</h4>
<p>Policy makers everywhere pledge to support small firms.</p>
</div>
<div>
<img class="noborder" src="/images/HatShop_100x70.png" width="100" alt="" title="Hat Shop" />
</div>
</div>
</div>
</div>
</div>
</div>
The image in .subFeatured is floated to the right, so it rests in the top right of the div. With a little margin and padding treatment on the image and text, everything should look OK. Remember to not add margins or padding to the parent container, div.subFeatured, as its width is already set to 50%. This method uses white space efficiently in that text can flow beneath the image.
The contents of .subArticles have been placed in two table-cells: image on the right, text on the left.
It’s not very economical space-wise, but the image can be vertically centered, if that’s important to you.
Padding can be added to the table-cells as needed. Table-cells cannot contain floats or positioned elements.