Nested floating divs not working - html

Question

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.
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.
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 underneath the photo instead of floating next to it.
I have put every combination of clear divs and overflow: hidden; I can reasonably think of, but to no avail.
The page in question is here: http://test.phantomlimb.net/about.php and the CSS is here: http://test.phantomlimb.net/phantom.css
I would greatly appreciate anyone pointing me in the right direction to solve this annoying conundrum before I break down and *gasp!* accomplish the same effect using tables in around 3 minutes!!!
PS I'm more of a designer than a coder, so please feel free to explain things as you would to a child.

Answer 1

Did you try this?
Add float: left; to your .bioleft class in phantom.css
Alternatively add float: right; to your .bioright class

Answer 2

You are missing colons in your css file. e.g. you have
.bioleft {
float left; /* HERE */
width: 25%;
background: red;
display: block;
}
.bioright {
float right; /* AND HERE */
width: 70%;
background: cyan;
display: block;
}
You should have float: left; and float: right;

Answer 3

IT is because of improper syntax you have float left; it should be float: left;

Answer 4

Have you considered using floated divs for the container left and right divs, then just use inline blocks for the divs inside the floated divs?
<div id="left">
<div id="img"></div>
<div id="content"></div>
</div>
And
#left {
float: left;
}
#img,#content {
display:inline-block;
}
#img {
width: 100px;
}
#content {
width: calc(100% - 100px);
}
That should put the image and the content side by side, but they will be treated as a block div.
You could actually put both the image and content divs inside their own container div and name that biog as the id, to create its own 'block'