Word wrapping around image using floats

can somebody help me with my problem? I am trying to float the .imgfloat so that p.lead wraps around it. Here are the codes

<article>
 <div class="imgfloat">
 </div>
 <p class="lead">To continue our visual clues about editable and non-editable
  regions, give the second row a slightly lighter gray background (since it is
  editable, but only in the 1st-level template), and the nested table a white
  background (since it's editable in both). 2nd_level_template.dwt should now
  look something like Figure 5.To continue our visual clues about editable and
  non-editable regions, give the second row a slightly lighter gray background
  (since it is editable, but only in the 1st-level template), and the nested
  table a white background (since it's editable in both). 2nd_level_template.dwt
  should now look something like Figure 5.
  </p>
</article>

CSS

article p{
  text-align:left;
  float:left;
}
.imgfloat{
  float:right;
  height:200px;
  width:300px;
  background-color:#ccc;
}

But the result is like this:

enter image description here


solution

Don’t float the text then.

By removing float:left from article p, the text will naturally wrap around the img element, which is floated, and thus removed from the flow.

EXAMPLE HERE

article p {
  text-align:left;
}
.imgfloat {
  float:right;
  height:200px;
  width:300px;
  background-color:#ccc;
}