1. Group related content - <div> - Use a describing class design pattern as if you were commenting to the user the current section of the page they are viewing.
2. Once you're finished doing this, you more than likely will have to use absolute positioning for certain portions of your document. With most designs you won't have to worry about positioning the footer/article/related sections. No extra markup will be needed to float these compound elements.
3. Absolute position embedded portions to achieve 'presentational free' markup.
4. Look at the example I provided that contains the navigation's of the page. You could have the primary navigation at the top of your page while the tertiary navigation is placed at the bottom of your page.

My point being is that you don't have to look at developing mock-ups with the top-bottom/left-right approach.

Code HTML4Strict:
<div id="header">
	<h1>...</h1>
	<p>...</p>
</div>
Code HTML4Strict:
<div id="article">
	<h2>Making people believers</h2>
	<p>....</p>
 
	<h3>Personal witnesses</h3>
	<ul>
		<li>....</li>
		<li>....</li>
	</ul>
 
	<p>....</p>
</div>
Code HTML4Strict:
<div id="related">
	<h2>....</h2>
	<p>....</p>
</div>
Code HTML4Strict:
<div id="navigation">
	<ul id="primary-navigation">
		<li><a href="#"></a></li>
		<li><a href="#"></a></li>
		<li><a href="#"></a></li>
	</ul>
 
	<ul id="secondary-navigation">
		<li><a href="#"></a></li>
		<li><a href="#"></a></li>
		<li><a href="#"></a></li>
	</ul>
 
	<ul id="tertiary-navigation">
		<li><a href="#"></a></li>
		<li><a href="#"></a></li>
		<li><a href="#"></a></li>
	</ul>
</div>
Code HTML4Strict:
<div id="footer">
	<address class="vcard">
		....
	</address>
</div>
Once you really feel comfortable with css, absolute positioning will become a very close friend of yours.