Q:

How do you create a webpage with a floating image, top left, bottom right, and with wrapping text in the middle

I'm trying to figure out how to create a webpage where I have text and floating images to the top left and bottom right.  I would like to use the floats using CSS and not the  tag if thats possible.  I have looked at several examples here at Stackoverflow and on the web, but I'm not finding the answer I'm looking for. The URL I have included shows exactly what I'm trying to accomplish. 

**CSS**

.boxframe {
 width: 675px;
 height: 800px;
 left: 243px;
 top: 400px;
 padding: 32px;
 position: absolute;
 background: #FBF4C7; 
 border: 2px solid brown;
 z-index: 1
}

.portrait {
 float:left;
 width: 244px;
 height: 294px;
 margin: 20px;
 padding: 0px;
 background: url('portrait.png');
 }

**HTML**

<div class="boxframe">
<div class="portrait">
</div>
 <p>Text Text Text Text Text</p>

A:

Something like this:
HTML
<div id="content">

        <img src="http://placehold.it/100x100" class="align-left">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque beatae voluptatum illo cupiditate culpa temporibus quasi sapiente aperiam eius quas? Ullam, maiores, perspiciatis dolore mollitia tempore optio cupiditate d aperiam eius quas? Ullam, maiores, perspiciatis dolore mollitia tempore optio cupiditate delectus iure?
    </p>  

    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque beatae voluptatum illo cupiditate culpa temporibus quasi sapiente aperiam eius quas? Ullam, maiores, perspiciatis dolore mollitia tempore optio cupiditate delectus iure? ribus quasi sapiente aperiam eius quas? Ullam, maiores, perspiciatis dolore mollitia tempore optio cupiditate delectus iure?
    </p>  
             <img src="http://placehold.it/100x100" class="align-right">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque beatae voluptatum illo cupiditate culpa temporibus quasi sapiente aperiam eius quas? Ullam, maiores, perspiciatis dolore mollitia tempore optio cupiditate delectus iure?
    </p>  

</div>

CSS
.align-left { float:left; margin:0 10px 0 0; }
.align-right { float:right; margin:0 0 0 10px; }
img { display:block }

#content { width:500px;}

JSFiddle Demo

