<div> not at 100% height

I have a web site where the layout of my pages are done with tables (began years ago).

I want to replace those tables by using divs instead.

I read some ebooks on the subject and visited some forums too but I can find why the following does not work:

My original web page (http://www.maitrebart.net/exphotos/lapoc/fleuve.htm) uses tables (no css).

I tried replacing the table forming the header, menu and content by div. However, I cannot get the menu side to spread 100% in height.

I read all parents (from html down to the menu's div) must have height set to 100%. That is what I did: http://www.maitrebart.net/exphotos/lapoc/fleuve2.htm (using http://www.maitrebart.net/exphotos/lapoc/fleuve2.css). That is the closest result wrt the original: the side menu extends down but not enough.

I read that when scroll bars appears, to use margin-top/bottom set to 0px instead of 100% height. That is what I did: http://www.maitrebart.net/exphotos/lapoc/fleuve1.htm (using http://www.maitrebart.net/exphotos/lapoc/fleuve1.css). This seems not working at all.

I test in firefox (with firebug) and checked also in IE6 and Chrome.

I tried different DOCTYPEs, different combinations of margin and height without any result in getting the same as the original as far as the side menu is concerned.

Note: You may forget about the small tables used to package the images and texts together. Those tables are not the main issue. I will try to convert them later, once the main layout is ok.

I would appreciate if anyone knowledgeable can tell me what is wrong in what I did.

Thank you.