[Solved]Text flowing around image

UPDATE: I don't think that I can do what I wanted which is float the image over the border and have text flow. At least not without lots of contortions. Thanks for your help.

Spice

Hi All,

I'm having a bit of trouble with flowing text around an image. The head and text containers are positioned where I need them. However, the test image I'm using (I know it's still big) is still moving the text to the wrong position. I'm sure it is a simple fix but I've been looking at it so long today that I'm ready to scream.

The page is at http://www.fussypuppy.com/index_pp.html.
The CSS is

body{ min-width: 775px; }

p, table, td, ul, ol{
font: 10pt Verdana;
color: #000;
line-height: 1.5em;
}

#container{
position: absolute;
top: 1em;
left: 20em;
width: 775px;
}

#banner{
width: 775px;
}

#nav{
width: 775px;
}

#pre{
width: 770px;
padding: 5px;
margin: 5px;
text-align: left;
}

#contLeft{
float: left;
clear: left;
width: 355px;
}

#contRight{
float: right;
clear: right;
width: 355px;
}

.headContainerLt{
width: 300px;
border: 1px solid #000;
background-color: white;
padding: 10px 5px 10px 5px;
text-align: left;
position: relative;
float: left;
clear: left;
}

.headContainerRt{
width: 300px;
border: 1px solid #000;
background-color: white;
padding: 10px 5px 10px 5px;
text-align: left;
position: relative;
float: right;
clear: right;
}

.headContainerLt h1, .headContainerRt h1{
font: 10pt Verdana;
font-weight: bold;
margin-bottom: 0;
}

.textContLt{
width: 225px;
border: 1px solid #000;
border-top: 0;
padding: 5px;
position: relative;
left: 1em;
text-align: left;
float: left;
clear: left;
}

.textContRt{
width: 225px;
border: 1px solid #000;
border-top: 0;
padding: 5px;
float: right;
left: -1em;
position: relative;
clear: right;
text-align: left;
}

Thanks for your help.