Relevant code as follows: -please let me know if I haven't included enough.
<img src="../Documents/Website Projects/xxx/girl_1.png" alt="special melbourne weddings" width="250" height="375" class="image_price_girl" /><h1>Pricing </h1>
<p class="content">Fees depend on the time of year, services needed and scheduling. I am flexible and negotitable but my fees typically start at $300 which includes all of my basic <a href="../Documents/Website Projects/DHappiness/services.html">services</a>. </p>
<p class="content">Please <a href="../Documents/Website Projects/xxx/contact.html">contact me</a> and I will be happy to talk to you about your needs and what I can do to make your day very special. </p>
<p class="content"> </p>
</div><br class="clear" />
font-family: Verdana, Geneva, sans-serif;
margin: 1px auto;
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.
zoom: 1; /* triggers hasLayout */
<IMG border="0" src="http://www.doublehappinesscelebrant.com.au/DHappiness/working%20images/trans.png" width="920" height="200" />
Double Happiness Marriage Celebrant
<DIV id="navigation" class=clearfix>
<A href="http://www.doublehappinesscelebrant.com.au/DHappiness/contact.html">Contact Me</A>
<A href="http://www.doublehappinesscelebrant.com.au/DHappiness/services.html">My Services</A>
<DIV id="text" class=clearfix>
<IMG class="image_price_girl" alt="special melbourne weddings" src="http://www.doublehappinesscelebrant.com.au/DHappiness/girl_1.png" width="270" height="375" />
Fees depend on the time of year, services needed and scheduling. I am flexible and negotitable but my fees typically
start at $300 which includes all of my basic
Please <A href="http://www.doublehappinesscelebrant.com.au/DHappiness/contact.html">contact me</A> and I will be happy
to talk to you about your needs and what I can do to make your day very special.
Carrie Kong Marriage Celebrant<BR />p: 0418 321 818<BR />firstname.lastname@example.org
<!-- end #footer -->
<!-- end #footer -->
<!-- end #container -->
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.