Productgrid-weergave & theming (Drupal 7)

Hoe zorg ik voor weergave van producten zoals bv. op de home page van manandshaving.nl? Dat zit vernuftig in elkaar:

• Weergave in een box met een lijntje eromheen
• Twee kolommen met daaronder een horizontale balk
• In de linkerkolom een productafbeelding. Onduidelijk hoe deze aligned is.
• In de rechterkolom: Titel, productomschrijving, prijs & leverstatus. Deze kolom is aligned met de bovenkant van de box
• Items in de horizontale balk zijn alligned met de onderkant van de box waar alles in zit

De complete HTML-code voor zo'n blok:

<div class="productBlok spacer">

	/* productHead = Linker- & rechterkolom */
	/* productHead = Linker- & rechterkolom */
	
	<div class="productHead">
	
		/* productRight */
		
		<div class="productRight">
			<div class="productTitle">
				<h2>
					<a href="/product/414/barc_scheercrème_cutting_up_180ml.aspx">Barc scheercrème Cutting Up 180ml</a>
				</h2>
			</div>
			<div class="productOmschrijving">
				<p>Barc Cutting Up is een verrijkte en volle scheercrème voor minimale irritatie en maximaal scheercomfort. Bevat geen alcohol, parfum, zeep of olie. Geschikt voor de gevoelige huid.</p><br>
				<div class="productBedrag">23,95</div><br>
				<div class="DirectShipment">
					status:<b style="color: #008800;">Direct leverbaar</b>
				</div>
			</div>
		</div>

		/* productLeft */
		
		<div class="productLeft">
			<a href="/product/414/barc_scheercrème_cutting_up_180ml.aspx">
				<img class="productAfbeelding" src="/pictures/1/90x135/Barc_scheercreme_cutting_up_6x9.jpg" alt="Barc scheercrème Cutting Up 180ml">
			</a>
		</div>

		<div class="float-clearing"> </div>
		
	</div> /* productHead */
	
		
	/* productFooter */
	/* productFooter */
		
	<div class="productFooter">
		<div class="productPrijsBlok">
			<div class="btnProductDetailsAction">
				<a href="/product/414/barc_scheercrème_cutting_up_180ml.aspx">Meer informatie</a>
			</div>
			<div class="addToCart overview">
				<div onclick="javascript:HandleCart('414', 1);return false;">
					<a onclick="return false;" href="#">Bestel</a>
				</div>
			</div>
			<div class="float-clearing"> </div>
		</div>
		<div class="float-clearing"> </div>
	</div>

</div> /* productBlok spacer */

<div class="float-clearing"> </div>