Menu bar Div causing contents to 'drop' below menu in IE

URL: http://www.jonbullceramics.co.uk

Browser(s): tested in FF3.01 (XP) and IE 7 (XP) - however problem reported in all versions of IE (none in FF)

Problem: I have a simple CSS/php site with a left menu div and some central content divs (no right hand menu) - however in IE the content always drops below the menu. This does not happen in FF (3) but I have not tested it against other browsers. The site has been written in spare time for a friend for free - there is therefore nothing clever about the site so please don't laugh - thanks :)
I have tried various changes (and HTML tidy) but not found any real problems - I am sure it must be something simple but to be honest CSS/HTML is not my thing (I am a server side Java dev by trade!) so a little confused. Any help much appreciated?

Snippets:

HTML: CSS:
.Thanks

Shaun

re: Menu bar Div causing contents to 'drop' below menu in IE

I think maybe you have a sort of over built construct. Keep it simple. Make a big box. Put smaller boxes in it. BTW, search engines can't read images so using text may be a better way to go than setting text as an image. Hold at least +2 font scaling in compliant browsers; and, in the IEs hold text-size largest. The floats should not drop at those settings. The IEs need a little horizontal play-- too tight horizontal tolerance will cause float drop. Validate the markup and CSS as you work.!

Maybe this simple example will help (I'd remove the image text that's in the large photo if it were mine) [1]. The xml declaration above the doctype puts Win/IE/6.0 and down in quirksmode-- making it easier to cope with those browsers.

Cursory checked in IE/7.0, IE/6.0, IE/5.5, IE/5.01, and Mac/IE/5.2-- and in compliant Mac browsers (FF, Camino, Safari, and Opera).
HTH,
[1]
Jon Bull Ceramics