CSS - Text Wrapping Content Around A Floated Image

<div class="floatright"><a href="./images/storyimages/1192298760_15.jpg"><img class="storyimage" border="0" src="./images/storyimages/thumbs/1192298760_15thumb.jpg" alt=""></a><br>This is a caption</div>
<p>		
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse viverra, orci venenatis 
consectetuer faucibus, purus nibh feugiat libero, nec pulvinar nulla orci ut lectus. Ut pellentesque pharetra erat. Proin quis 
lacus ut sapien ullamcorper consectetuer. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse viverra, orci venenatis 
consectetuer faucibus, purus nibh feugiat libero, nec pulvinar nulla orci ut lectus. Ut pellentesque pharetra erat. Proin quis 
lacus ut sapien ullamcorper consectetuer.
</p>

.floatright {
float: right;
margin: 0 10px 10px;
}
#main_inner_wrap {
margin:0 auto;
width:690px;
}
#main_inner_wrap p {
font-family: Geneva, Verdana, Arial, Helvetica, sans-serif;
font-size: .9em;
line-height: 1.4em;
padding:0 10px;
min-height: 100%;
}
#main_col_left {
float:left;
width:150px;
color: #330;
line-height: 1.5em;
}
#main_col_right {
margin-top: 0;
float:right;
width:540px;
color: #330;
background:url("./images/news_bg.gif");
background-repeat: repeat-y;
}

/*----------PAGE CENTERED AND FLUSH TOP-----*/
*{margin:0px;
padding: 0px;
}

/*---------------BODY BACKGROUND------------*/
body{
background-color:#333333;
}

/*-----------BACKGROUND-CONTAINER-----------*/
#background-container{
width: 780px;
background-color:white;
margin: 0px auto;
padding-top:0px;
padding-bottom:0px;
font-family:Arial;
font-size:10pt;
}

/*-------HEADER ELEMENTS----------*/

#banner{
width: 780px;
height: 200px;
background-color:#CC9900;
background-image:url();
border-bottom: 5px solid #333333;
}

#header{
width:770px;
background-color:#FFFFFF;
background-image:url(vertical-scanline.jpg);
padding-left:10px;
font-family: Arial;
font-size:29px;
font-weight: bold;
}


/*-----------BEGIN DROP-DOWN MENU--------*/

div#listmenu{
background-color:#860505;
font: 10pt Arial;
float:left;
width:780px;
margin: 0px auto;
}

div#listmenu ul{
margin: 0 0 0 30px;
}

*html div#listmenu ul{
float:left;
border-left: 1px solid gray;
margin-left:15px;
}

*html a{display:block;
color:#FFFFFF;}

div#listmenu li{
float:left;
position:relative;
background-color:#860505;
list-style-type:none;
padding: 0 6px;
border-right:1px solid black;
}


div#listmenu ul li ul{
margin: 0px;
position:absolute;
width:10em;}


div#listmenu ul li ul li{
width:100%;
border-left: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}

div#listmenu li{first-child:
border-left: 1px solid black;
}

div#listmenu ul li ul li {first-child:
border-top: 1px solid gray;
}


div#listmenu a{ 
text-decoration:none;
font-weight:bold;
color:#ffffff;
display:block;
padding: 0 6px;
background-color:#860505;
}

div#listmenu a:hover{
background-color:#FFFFFF;
color:#000000;
}


body div#listcontainer ul li ul {display:none;}
div#listcontainer ul li:hover ul {
display:block;
}
div#listcontainer ul li:hover ul, div#listcontainer ul li ul:hover {display:block;
z-index:25;
}

/*-----------END DROP-DOWN MENU--------*/


/*-----CLEARING ELEMENT BEGIN---------*/
.clearfix:after {      
content: ".";       
display: block;     
height: 0;    
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}     
* html .clearfix {height: 1%;}     
.clearfix {display: block;}   
/*-----CLEARING ELEMENT END---------*/



/*--------------MAIN CONTENT---------*/
#main-container{
background-color:#ffffff;
}

/*----------COLUMNS--------*/
#sectionright{
width:190px;
background-color:#860505;
border-bottom: 5px solid #333333;
font-family:Arial;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
text-indent:20px;
float:right;
}

#rightcol{
width:190px;
background-color:#CCCCCC;
font-family:"Arial";
color:#000000;
font-size:12px;
text-align: left;
text-indent:20px;
border-bottom: 5px solid #333333;
padding:0px;
float: right;
clear:right;
}

#subscription{
width: 190px;
background-color:#CC9900;
border-bottom: 5px solid #333333;
font-family:Arial;
text-align:left;
font-size:10px;
margin-bottom:3px;
float: right;
clear:right;
}

#crisp{
width:190px;
height:150px;
background-color:#FFFFFF;
border-bottom: 5px solid #333333;
font-family:"Arial";
color:#000000;
font-size:11px;
text-align:left;
float:right;
clear:right;
margin-bottom:3px;
}


#logo{
width:190px;
height:90px;
background-color:#FFFFFF;
border-bottom: 5px solid #333333;
float: right;
clear:right;
}

#left-floater{
width:150px;
padding-top:50px;
float:right;
background-color:#FFFFFF;
font-size:11pt;
}

#floater-bottomleft{
width:150px;
padding-top:50px;
float:right;
background-color:#FFFFFF;
font-size:11pt;
}



#bottom{
width: 675px;
clear:right;
background-color:#FFFFFF;
margin-top: 15px;
margin-bottom: 15px;
}

#footer{
height:15px;
width: 780px;
background-color:#999999;
font-family:"Arial";
font-size:10px;
text-align:center;
margin-top:5px;
clear:right;
}


/*-----------BODY ELEMENTS-------*/

.subheader{
background-color:#D1A10D;
font-family:"Arial";
font-size:19px;
font-weight: bold;
text-align:left;
text-indent:5px;
padding-top:5px;
padding-bottom: 2px;
}


.pagesub{
background-color:#FFFFFF;
font-family:"Arial";
font-size:16px;
font-weight: bold;
color:#860505;
text-align:left;
margin-top:5px;
margin-bottom: 5px;
}

.column-title{
width: 190px;
font-family:Arial;
color: #000000;
font-size: 14px; 
font-weight:bold;
text-align: center;
}

div#main-container img {
float:left; 
border: 1px solid #333;
}



/*------PARAGRAPH PROPERTIES-----*/

.p-main{
width:560px;
margin-left:5px;
padding-top:10px;
padding-bottom:10px;
text-align:justify;
font-size:10pt;
}

ul{
padding-left:15px;
list-style:none;
}

.pcolumn{padding-left: 40px;}
.p-ul{font:10pt Arial;}
.ptop{margin-bottom:5px;}


/*----------------LINK PROPERTIES--------------*/
a:link{color:#000000; background-color:transparent;}
a:visited{color:#CC0000; background-color:transparent;}
a:active{color:#000000; background-color:transparent;}

/*-----------RIGHT COL AND CRISP LINK PROPERTIES----*/
div#rightcol a:link{color:#000000; background-color:transparent;}
div#rightcol a:visited{color:#CC0000; background-color:transparent;}
div#rightcol a:active{color:#000000; background-color:transparent;}

div#crisp a:link{color:#000000; background-color:transparent;}
div#crisp a:visited{color:#CC0000; background-color:transparent;}
div#crisp a:active{color:#000000; background-color:transparent;}


/*------HTML BELOW-----*/

<body>
<div id= "background-container">
<div id="listmenu">
<div id="listcontainer" class="clearfix">
<ul>
<li><a href="http://www.crge.umd.edu">Home</a></li>
<li><a href="#">Who We Are</a><ul>
<li><a href="#">Director's Message</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Faculty</a></li>
<li><a href="#">Funders</a></li>
<li><a href="#">Affiliates</a></li>
</ul>
</li>


<li><a href="#">Research</a>
<ul>
<li><a href="#">Research Program Areas</a></li>
<li><a href="#">Research Interest Groups</a></li>
<li><a href="#">CrISP Research Training Program</a></li>
<li><a href="#">Intersectional Research Database</a></li>
</ul>
</li>


<li><a href="#">Publications</a>
<ul>
<li><a href="#">Research Connections 2007</a></li>
<li><a href="#">Research Action Briefs</a></li>
<li><a href="#">Campus Report</a></li>
</ul>
</li>


<li><a href="#">Resources</a>
<ul>
<li><a href="#">Professional Opportunities</a></li>
<li><a href="#">Alternative News Sources</a></li>
<li><a href="#">Tools from Graduate Colloquium</a></li>
</ul>
</li>


<li><a href="#">Events</a>
<ul>
<li><a href="#">Graduate Colloquium</a></li>
<li><a href="#">QRIG Seminars</a></li>
<li><a href="#">MC/VC Series</a></li>
<li><a href="#">Calendar</a></li>
</ul>
</li>


<li><a href="#">Media</a>
<ul><li><a href="">Press Releases</a></li></ul>
</li>


<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>

<div id="header">The Consortium on Race, Gender and Ethnicity: CRGE</div>
<div id="banner">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="780" height="200">
    <param name="movie" value="CRGEbanner.swf">
    <param name="wmode" value="transparent">
    <embed wmode="transparent" src="CRGE%20banner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="780" height="200"></embed>
  </object>
</div>

<div id="sectionright">Who We Are</div>
<div id="rightcol"><p class="p-right"><b>In This Section</b></p>
<p><ul>
<li><a href="http://www.crge.umd.edu/about.html" target="_blank">Director's Message</a></li>
<li><a href="http://www.crge.umd.edu/staff.html" target="_blank">Staff</a></li>
<li><a href="http://www.crge.umd.edu/faculty.html" target="_blank">Faculty</a></li>
<li><a href="http://www.crge.umd.edu/funders.html" target="_blank">Funders</a></li>
<li><a href="http://www.crge.umd.edu/affiliates.html" target="_blank">Affiliates</a></li>
</ul></p>
&nbsp;<br>
&nbsp;<br>
</div>
<div id="subscription">
<form method="post" action="http://www.emailmeform.com/fid.php?formid=35482">
<INPUT TYPE=hidden NAME=FCode VALUE="8gdrzytp">                
<table cellpadding="2" cellspacing="0" border="0" bgcolor="#CC9900">
<tr>
<td>
<font face="Arial" size="2" color="#000000">Subscribe to CRGE's Listserv</font>
 <div style="" id="mainmsg"> </div>
</td>
</tr>
</table>
<br>
<table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF">
<tr valign="top">
 <td nowrap><font face="Arial" size="2" color="#000000">Name</font></td>
 <td>
<input type="text" name="FieldData0" value="" maxlength="100" size="20"> </td>
</tr>      
<tr valign="top">
 <td nowrap><font face="Arial" size="2" color="#000000"> Email</font></td>
 <td>
<input type="text" name="FieldData1" value="" maxlength="100" size="20"> </td>
</tr>      
<tr>
 <td colspan="2">
</td>
</tr>
<tr>
 <td></td>
 <td align="left">
<input type="text" name="hida2" value="" maxlength="100" size="3" style="display : none;">
<input type="submit" class="btn" value="Subscribe" name="Submit"></td>
</tr>
</table>                      
</form>
</div>
<div id="logo"><p align="center"><img src="umlogo.gif"></p></div>
<div id="main-container">
<p class="subheader">Director's Message</p>
<p class="p-main"><img src="btdill2.jpg" width="150" height="175" />Welcome to the Web site for the Consortium on Race, Gender and Ethnicity.</p>
<p class="p-main">The Consortium is an association of academic units and individual faculty on the University of Maryland campus whose mission is to promote, advance, and conduct research, scholarship, and faculty development that examines the intersections of race, gender, and ethnicity with other dimensions of difference.</p>

<p class="p-main">Established in 1998 with support from the Colleges of Arts and Humanities, Behavioral and Social Sciences, the Graduate School, and the Office of the Provost, the Consortium seeks to: support, coordinate, and facilitate the activities of the many outstanding faculty and academic units at Maryland engaged in scholarship that focuses on intersections of race, gender, and ethnicity; and to build visibility both on and off-campus for our exceptional wealth of resources.</p>

<p class="p-main">Through our affiliates, community partners, and research interest groups, we encourage an intellectual climate that supports collaboration. Through our Research Program Areas, we promote approaches that contextualize the lives and experiences of the individuals and groups that participate in our research. Through this Web site and other dissemination efforts, we develop applications of knowledge to human problems. Through a variety of research training opportunities we seek to transfer intellectual capital to upcoming generations.</p>

</div>
<div id="footer"><p>Home | Who We Are | Research | Publications | Resources | Events | Media | Contact Us</p></div>
</div>
</body>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
p {
  margin: 0 0;
  color: white;
}
#title {
  background-color: red;
  height: 105px;
}
#left {
  float: left;
  margin: 20px 20px;
  background-color: yellow;
}
#right {
  float: right;
  margin: 20px 20px;
  background-color: blue;
  overflow: hidden;
}
</style>
</head><body>

<div id="title">
  <div id="left">
    <a href="index.htm"><img src="http://i52.tinypic.com/2u9l5z9.png" alt="" width="429px" height="65px" border="0" /></a>
  </div>
  <div id="right">
    <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
  </div>
</div>

</body></html>