css paragraph not floating around div

Question

My float works...kind of..however I'm having a problem when resizing my browser. I would like the text to wrap around the div when the screen gets smaller however it's just squishing to the right in a long line of text to the bottom.

Here are some pics.

This is when it's wider

and then this is what it's doing when I resize the browser

my html kind of looks like this

<div class="info">
    <div class="userInfo">
        <p>info here</p>
        <img>
    </div>
    <div class="bio">
        <p>paragraph</p>
        <p>paragraph</p>
        <p>paragraph</p>
    </div>
</div>

and my css looks like this

.userInfo{
    float: left;
}

.bio p{
    padding-left: 14em;
}

Answer 1

You will have to move your paragraphs inside the same div as the image, and float the actual image. Something like this: http://jsfiddle.net/cLcJu/

As you can see the code is very simple:

<div class="userInfo">
     <p>some content above the image</p>
     <img src='path_to_image'>
     <p>A bunch of content to the right of and underneath the image</p>
</div>

and the css

.userInfo img {
    display: block;
    float: left;
    padding: 10px;    
}

Answer 2

This should work:

HTML

<div class="info">
  <div class="userInfo">
      <p>info here</p>
      <img src="image">
      <p>paragraph</p>
  </div>
</div>

CSS

.userInfo img { float: left; }