title: Nested floating divs not working
body: <p>On the site I'm currently coding I have a centered DIV containing a float left column and a smaller float right column. This works fine.</p>
  
  <p>In the Left floating column, I have a further float left column, containing an bio image, and a float right text column containing the bio text. </p>
  
  <p>However, I am at the point of throwing my computer out of the window because the last two bio divs are sitting on top of each other, with the text <em>underneath</em> the photo instead of floating next to it.</p>
  
  <p>I have put every combination of clear divs and overflow: hidden; I can reasonably think of, but to no avail.</p>
  
  <p>The page in question is here: <a href="http://test.phantomlimb.net/about.php" rel="nofollow">http://test.phantomlimb.net/about.php</a> and the CSS is here: <a href="http://test.phantomlimb.net/phantom.css" rel="nofollow">http://test.phantomlimb.net/phantom.css</a></p>
  
  <p>I would greatly appreciate anyone pointing me in the right direction to solve this annoying conundrum before I break down and <em>*gasp!*</em> accomplish the same effect using tables in around 3 minutes!!!</p>
  
  <p>PS I'm more of a designer than a coder, so please feel free to explain things as you would to a child.</p>