CSS Float(?)/IE problem

[Deryck]

Hello,

I am sure that this is either a well documented problem with IE and I just
cant find the solution at the moment OR that I have made a very stupid
mistake. In either case please accept my apologies for asking for help here.

I have encountered a problem with getting an image to line up where I want
it to. I validated the HTML and CSS just fine but the problem remained. So,
I just cut down the HTML and CSS to a very minimal example that shows the
problem.

It's here:
http://www.longhope.co.uk/float_problem/

It looks how I expect it to look when I use FF or Opera, that is, the image
floats around the second paragraph of text. Depending on the width of your
viewport the bottom of the image may or may not extend beyond the bottom of
the div that I have called 'content', thats ok, I would expect that.
The problem in IE6 is that the image floats up too much, into the 1st
paragraph and out of the top of the content box/div.

I'm sure this is a well known issue so if anyone could just give me a URL to
a page that describes the problem (and the fix!) would be much appreciated.
I really dont want to use a table to fix the problem.

Many thanks,

Deryck
PS
The page given is just an example with random text from the BBC website and
a picture of my cat, so no comments on design/content are needed please. The
dimensions and position of the content box do reflect the style of the site
being designed though.

 

[Deryck]

Hello,

OK, problem solved. I need to float the containing div (called content in
this case). See http://css-discuss.incutio.com/?page=GalleryFloat for a
better description.

Deryck