Boxes in Boxes

The boxes below are well documented all over the net so please feel free to do with them whatever you will. As you can see the css is the same throughout just slight differences in the span styles.

Box 1

The magpie is a cosmopolitan bird, its range extending from Portugal to Korea. It also occurs in North Africa, and in parts of western USA and Canada.

Magpie
Pica pica

The magpie is a large, black and white bird with a long, green-glossed tail and metallic blue-black wings. It is common throughout Britain, although absent from northern Scotland.

Magpies are territorial and, because nest sites are limited, not all birds in an area will breed. Those that do build large, domed nests of twigs in a thorny bush or tall tree. In April to May females lay a clutch of between five and eight eggs


Box 2

Magpie
Pica pica

Magpies are distributed widely throughout the UK, their population increasing at the average of about 6% per year since about 1940. This increase has largely levelled out since the early 1990s and is currently fairly stable.

A breeding pair of magpies will take about five weeks to build their characteristic dome shaped nest during March and early in April. This nest is made out of twigs and lined with roots or grass.


Box 3

Magpie
Pica pica

Eye-catching, cunning and aggressive are all terms used to describe magpies. Eye-catching for their plumage, cunning due to the persecution they have received from gamekeepers over the past 250 years, and aggressive in their manner of raiding songbird nests for eggs and fledglings.


CSS

#doublebox
{
width:300px;
text-align:left;
padding:10px;
background-color:#D4D4D4;
border:1px solid #666666;
font-size:12px;
}

HTML Box 1

<div id="doublebox"><span style="width:105px;float:left;margin:10px;padding:10px;
border:1px dashed #336666;background:#fff;" border:1px solid black;"> Text inside the dashed area goes here </span>Text outside the box goes here</div>

HTML Box 2

<div id="doublebox"> <span style="float:right;margin:10px;padding:10px;border:1px solid blue;background:#fff;"> <img src="your image here" width="???" height="???" border="0"> </span>Text ouside the box goes here</div>

HTML Box 3

<div id="doublebox"> <span style="float:left;margin:10px;padding:20px;border:20px solid #DBC8C8;background:#fff;"> <img src="your image here" width="???" height="???" border="0"> </span>Text ouside the box goes here</div>