Issues with floats, and padding inside floats

I'm trying to basically do a float inside of a float, and I'm running into a problem. On this page:

http://jumpthru.net/newsite/team/

I want the text to be lined up with the picture, and the only way I have been able to do so is with a negative margin on the .bioinfo

Here is the css:

#leftcol{
float:left;
width:440px;
}

.biopic 开发者_开发技巧{
width: 100px;
}

.bioinfo {
padding-left: 120px;
}

I've only tested in Firefox so far, cross browser testing still to come!

Thank you, Megan

Remove the following properties:

.bioinfo { display: inline-block; }

There is a global property of clear both on style.css(line 24) for the h2.

I would remove the clear both.

This Works:

#leftcol{
  float:left;
  width:440px;
}

.biopic {
  width: 100px;
  float:left;
}

.bioinfo h2, .bioinfo p, .bioinfo ul {
  margin-left: 120px;
}