Image problems in IE (probably CSS related)

[Dorza]

Ok i have the following problem with this Site im working on. When that site is viewd with FF,Opera or NS, "image one" at the top of the screen breaks out of the centre column and overlaps into the column on the right:

Screenshoot (See red circle):



The above image is exceptable thats how i want it to go when viewed at a lower screen width/resolution. However if you view that site with IE6 then reduce the window width the following happens:



IE6 tries to contain the image within the centre column (whiteish area) and so the strucutre of the site breaks. IE for some reason sticks the image further down the page:



As you can see IE wont allow the image to break out of the centre column when its width is wider than the centre column.And then everything breaks down like i said above. So i was wondering if there was any way to fix this issue so that IE displays the image like in the first screenshot i provided. Any help would be appreciated

[XA04]

I may be wrong, but for it not to overlay it you may need to use a table..

[Iain]

You don't ever need to use tables. As a first pass try wrapping the image and set the div to have a CSS property of display:inline; and see what happens

[ikonia]

that was an interesting learning experience for me at least.

thank you for sharing problem

[Dorza]

Thanks for your suggestions so far...
Iain i tried what you suggested but it didnt work. I played around with it for a while and got it to work with a float property, but then the image sinks beneath the "Test" one and two headers even when using a maximized window, so that wasnt a viable solution either. Just to check this is what i done:

.img { display:inline;}, then stuck that in a div tag. Is this what you meant?