What I did to fix your layout issues was to one drop the clear class in favor of a different layout fix which incorporates the zoom:1 and clears the content immediately after the float containing element. I also removed the image from the first <p> tag and placed it into its own containing div which I floated left. With the clearfix class I've used you no longer need to add a <br class=clear> or zoom:1 individually.

I looked back at my test code and I realized that I also removed the width from the .content class. The width to the right of the image is only 600px so 900 px will push it down below the image as it doesn't have the space. Try removing it you don't really need to set a fixed width (if you want the image and text to take up a specific area you should set the width of the containing div.

On of the books I got when I started my web dev job was http://apress.com/book/view/159059732x. It cleared up some basic stuff and showed me some things I hadden't considered yet. Another thing that will help is getting to know your tools such as firebug for Firefox and the Developer tools for IE. Both tools can cut your debug time in 1/2 just by being able to see how the browser see's your elements and both allow you to edit the html and css in the browser (which you have to remember to copy back to your actual file) with out actually changing the actual code.

FLOAT concept itself is not easy to properly understand, moreover FLOATs are a source of many browser bugs (mainly IE bugs) which make FLOAT constructs difficult to master across browsers... and easy to break.