When you place a <div> it automatically makes a new line space..
I would place a <div> around both the picture and the text..
This is a parent div as a container for the children inside of it similar to <table> and <td>
you can align these elements/nodes within there parent element/node
if you need a little more space you can specify style="padding-top: 1px;"
or however many pixel you need but first wrap that div around your content.
code in question\/
<div id="navbar"><font size="5"><a href="index.htm">Home</a> <a href="about.htm">About</a>
<a href="photos.htm">Photos</a> <a href="contribute.htm">Contribute</a> </font></div>
<p> </p>[color=red]<!--where there is a div a space is created like your paragraph tags-->[/color]
<div style="float: left"><img alt="" src="http://i161.photobucket.com/albums/t201/graciethebookworm/The%20Sound%20of%20Music/London/conniekids460-1.jpg " /></div>
<p> <strong><em><font size="5">Let's start at the very beginning...</font></em></strong></p>
go ahead and wrap that div around your content and your good to go
Now you will come to the question in firefox why dosn't my div resize my boarders appear in the middle
of my content.. right before the ending parent tag add <div style="clear: both !important;"/>