I have a layout which is working fine in IE 7, FF 2 and Opera 9 - until I insert an image into the main content DIV, along with the text that is already there. Firefox sends the two right column DIVs down to the left, below everything else, although neither IE 7 nor Opera 9 have the same problem.

This is the image in question: which is obviously quite small. I have tried images of all different sizes and they all cause the same problem. I have also tried wrapping the image in DIV tags, in SPAN tags and in H5 tags (not simultaneously, of course), but these make no difference in resolving the problem. I thought that taking the image out of its surrounding <P> tags would fix the issue, but it did not.

http://www.designhowto.com/index.html (the one with the small "about" image, which causes problems in Firefox)
http://www.designhowto.com/index_no_img.html (this is the one with no image in the main content area. It is working fine, even in FF)
http://www.designhowto.com/css/main.css (the main css file, cunningly named to confuse the unwary)
http://www.designhowto.com/css/rollovers.css (minor image rollover CSS)

Can anyone please identify why I cannot add images in the content DIV without causing layout problems in Firefox? Why should a tiny image with no additional padding or margins make the two adjacent columns slip down below the main DIV?

I didn't even notice this problem when I was testing this page locally with Dreamweaver, because it previews using a temporary HTML file on the local hard disk. But as soon as I uploaded it to the web, the dropping div issue became obvious in FF 2.

You may need to hit the reload button in FF for index_no_img.html if you have already loaded the index.html file - otherwise you will might not see the two right hand columns jump up to their correct position.

The site is being designed for a maximized browser window at 1024x768 screen resolution. I know that it is not optimized for 800x600 and causes problems with hidden content when viewed at that size, but that is not a concern right now. I just would like to resolve the dropped columns issue, please. Any insight into this problem would be greatly appreciated.

Cassepied.

Thanks for your suggestions. The deprecated elements are mainly (or totally) due to the Google search function at the top of the page. Google code is pretty old school but they threaten you with dire consequences if you modify it.

Thanks for the tip about capitals in CSS. I will get rid of those.

CSP.