Markup
Kod:
<div id="container">
<div>
*<div class="ingredients">
* <h3>Ingredientser</h3>
* <strong>1 st</strong>
* <ul>
* *<li>Något...</li>
* </ul>
*</div>
*<img src="img.png" alt="Bild" />
*<div class="clear"></div>
</div>
<div class="instructions">
*<h3>Gör så här</h3>
*<p>Lorem ipsum...</p>
</div>
</div>
CSS
Kod:
#container
{width: 430px;}
.ingredients, .instructions
{border: 1px solid #ccc; padding: 15px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
.ingredients
{float: left; width: 110px; margin-right: 10px;}
.instructions
{margin-top: 10px;}
En ljusgrå rundad kant (FF, Webkit) och likadana marginaler överallt.
Sen får du styla .ingredients ul (listan) samt #container h3 för rubrikerna.
Hoppas att det var till någon nytta
