I've always used html tables for the layout of my webpages. In an attempt to make proper use of css for the page layout, I'm running into a problem when a user increments the text size (in firefox e.g. with the key combination control-plus).

My page is based on http://tutorials.alsacreations.com/modelesmenus/hd2.htm and it demonstrates the problem that I experience.

If one increases the text size using the browser the text eventually starts overlapping. I solved the issue that the menu disappears behind the actual content by adding a z-index to the menu identifier (#menu) in the css.

However, I'll like the second div (the actual page content) to move down when the text size increases so no overlap occurs.

Does anybody know if this can be achieved? I've played with the position attribute without success.

PS 1:
viewing the source of above page reveals all relevant information so I will not post it here.
PS 2:
I'm a 'beginner' with css, so I might have overlooked something that is very obvious for others.

I had one of the submenu selections overwrap even in the normal size.

Changing the bottom margin from 300 -> 50, you have to increase the size to a ridiculous amount before there is an overlap.

It does not make sense to me to use the bottom attribute as pages usually are read from top to bottom. So in my own page, I've changed it for the second div to top:80px. I've made a few other changes as well (e.g. more horizontal space for the submenus).

It however is beside the point. The second div should basically move down when the first div occupies more space (my view / requirement). One can probably solve it using javascript (if there is something like an ondraw event) but coding is not my first option. Other options?

Try adding a div between the menu and the content as follows:

where the class clear is defined in the css as:

Got to a point where it more or less works; still not 100% satisfied.

Problem originates (in my opinion) from the absolute position of the 'menu' style and and the 'mentions' style. Changing those to static does part of the trick. Next add graemef's second code block to the style of 'mentions' (the seperate style did not work (yet)).
Now only the submenu will overlap.

It has very low priority now and will fiddle another time with it again.

Thanks for the input.