Anzac Biscuits

Simple HTML and CSS demonstration

by Michael Borck

HTML

<img class="image" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/95/ANZAC_biscuits.JPG/320px-ANZAC_biscuits.JPG"/> 

<div class="description">  
<h2> ANZAC Biscuits </h2>
ANZAC Biscuits were made by the wives of Australian and New Zealand service men durnig the first world war as a sweet treet that could be made at home and shipped overseas.
</div>

<!-- <div class="ingredients">  -->
    <h2>Ingredients</h2>
    <ul>
        <li> 1 cup each of rolled oats, sugar and coconut </li>
        <li> 1 tablespoon syrup</li>
        <li> 3/4 cup flour </li>
        <li> 2 tablespoons butter</li>
        <li>1 teaspoon bicarbonate of soda (dissolved in 2 tablespoons boiling water)</li>
    </ul>
<!-- </div> -->

<h2>Method</h2>
<ol>
    <li>Melt butter.</li>
    <li>Add syrup to dissolved soda and water. Combine with melted butter.</li>
    <li>Mix dry ingredients and stir in liquid.</li>
    <li>Place small balls on ot buttered tray and bake in moderate oven.</li>
    <li>Lift out carefully with a knife as they are soft till cold.</li>
    <li>Biscuits will harden when cool. </li>
</ol>

<h2>Reference</h2>
Original recipe from the <a href="http://www.awm.gov.au/encyclopedia/anzac/biscuit/recipe/">Australian War Memorial</a>.

<p id="license">Image by pfctdayelise licensed under the Creative Commons Attribution-Share Alike 2.5 Generic, 2.0 Generic and 1.0 Generic license </p>

CSS

.image {
    width: 20%;
    float: left;
}

.description {
    float: left;
    width: 75%;
    padding-left: 5%;
}

.ingredients {
    padding-top:5px;
    clear: both;
}

ul, ol {background-color: lightgrey;}